vue父子组件互相传值

第一种：父组件用 :变量名="" @方法

父组件传递值给子组件

用 v-bind:inputName传递一个值

  <date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick> 
  //这里传item是因为传item，然后修改里面的属性可以有一个动态的数据修改。自己把握

父组件中定义changeName方法

changeName (val, item) {
      item.label = val
}

子组件获取父组件的值

 props: ['inputName']

子组件在data上定义数据 fatherInputName

注意这里fatherInputName要用从Props里的数据来初始化

  data () {
    return {
      fatherInputName: this.inputName
      }
  }

在子组件中监听fatherInputName的改变

 watch: {
    fatherInputName (nval) {
      this.$emit('changeInputName', nval) // 这里和父组件上的@changeInputName保持一致啊，默认的第一个参数一定是$event
    }
  }

第二种: .inputName.sync方法

父组件传递给子组件 用sync

  <date-pick :inputName.sync="item.label"></date-pick>

子组件获取也是用props

props: ['inputName'],

一样用data定义个参数 fatherInputName

 fatherInputName: this.inputName,

监听参数fatherInputName

  watch: {
    fatherInputName (nval) {
      this.$emit('update:inputName', nval)
    }
  },

第三种： 在自定义组件上用v-model

     <date-pick v-model="item.label"></date-pick>

在子组件Props中用value接收，input发送事件

props: {
    value: {
      type: String
    }
  }

子组件中定义自己的数据 data

fatherInputName: this.value,

子组件利用watch监听 子组件中表单v-model改变，从而发给父组件让父组件发生改变

 watch: {
    fatherInputName(nval){
      this.$emit("input",nval)
    }
  },

子组件的template用刚刚定义的fatherInputName

          <el-input v-model="fatherInputName"></el-input>

第四种：上面都是用的watch，实际也可以使用computed来操作，也就是前3种都可以配合computed组合成6种

父组件传值给子组件

    <date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick>

子组件用props接受值

props: ['inputName'],

子组件template ， v-model的是computed的数据

 <el-input v-model="fname"></el-input>

子组件中定义数据

data () {
    return {
      fatherInputName: this.inputName,
      // 控住设置时段的显示与隐藏
      dialogVisible: false,
      }
 }

子组件中用computed去改变值

 computed:{
    fname: {
      set: function (nval) {
        this.$emit('changeInputName', nval)
        this.fatherInputName = nval
      },
      get: function () {
        return this.fatherInputName
      }
    }
  },