vue组件之间传值--通过ref属性

思想：

通过this.$refs.refName可以获取到组件，从而可以使用组件中的变量和调用组件中的方法。

使用步骤：（假设：左子组件向右子组件传值）

1. 左子组件使用自定义事件把值传递给父组件
2. 右子组件中准备好接受值的方法
3. 父组件在自定义事件触发的时候通过this.$refs.refName获取到右子组件，调用右组件中的方法进行变量修改或存储

Deom: (项目中代码片段)

//--------------------------当作左子组件----------------------------
getinsertedsameword(){
      if(this.timevalue instanceof Array){ //有时间
        this.$emit('getInserted',this.insertedword,this.timevalue)
      }else{
        // 把数据传递给main组件
        this.$emit("getInserted", this.insertedword); 
      }
   },
   
//----------------------父子组件------------------------------------
<div class="container">
    <!-- 头部内容 -->
    <div class="topcontainer">
     <sameword-top @updateTable="updateTable" @getInserted="getInserted"></sameword-top>
    </div>
    <!-- 主要内容 -->
    <div class="maincontainer">
      <sameword-main ref="samewordmain"></sameword-main>
    </div>
  </div>
 //------------------------------------------------------------//
 methods: {
    updateTable(){
        this.$refs.samewordmain.getsamewordmsg()
    },
    getInserted(val1,val2){
      this.$refs.samewordmain.tableFilter(val1,val2)
    }
  },
  
 //--------------------------当作右子组件--------------------------
  tableFilter(val1,val2){ //val1值，，val2时间
      if(val1==""){
        if(!val2){
          this.tableData = this.tableDatar
        }else{
          this.tableData = this.tableDatar.filter(item=>{
            if(item.updateTime.substring(0,10)>=val2[0]&&item.updateTime.substring(0,10)<=val2[1]){
              return item.synonymWords
            }
          })
        }
      }else{ //val1值不为空
        let datas = this.tableDatar.filter(item=>{
          return item.synonymWords.includes(val1)
        })
        if(!val2){
          this.tableData = datas
        }else{ //时间不为空
          this.tableData = datas.filter(item=>{
            if(item.updateTime.substring(0,10)>=val2[0]&&item.updateTime.substring(0,10)<=val2[1]){
              return item.synonymWords
            }
          })
        }
      }
    }

Demo案例：

getinsertedsameword方法触发后，通过this.$emit()自定义事件把值传递给父组件。父组件绑定自定义事件：<sameword-top @getInserted="getInserted"></sameword-top>，且在右子组件上绑定一个ref属性，当getInserted()方法触发时，通过this.$refs.samewordmain.tableFilter()调用右组件中的tableFilter()方法。