vue 父子组件相互传递数据

一 . v-model

v-model可以实现数据的双向绑定，v-model只是语法糖，真正的实现形式：

<input type="text" :value="message" @input="message = $event.target.value">

1.将输入框绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message

2.监听input事件，当输入类内容为不同的输入元素使用不同的属性并抛出不同的事件。

例如：text和textarea元素使用value属性和input事件，checkbox和radio使用checked和change事件，select使用value和change事件。

 

通过上述分析，默认情况下，一个组件上的v-model会把value用作prop且把input用作event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组建并没有默认的value和input事件。在使用时，我们需要按照上面那样显示的去声明定义这些东西，可以在定义组件的时候，制定prop的值和监听的事件。

在子组件中：

   // 子组件
    model: {
        prop: 'uname',
        // 随便命名事件，对应下面$emit即可
        event: 'changeXXX'
    },
    props:{
       uname:{
          default:'',
          type:String
       }
    },
    methods: {
        updateVal(val){
　　　　　　　　// 修改数据传递给父组件
            this.$emit('changeXXX',val)
    }

  // 父组件
 / name是父组件中的属性
<子组件 v-model="name" ></子组件>

等价于

<子组件 :uname='name' @changeXXX='val => {foo = val}' value='some value'></子组件>

 

二.  .sync修饰符

使用.sync修饰符可以直接将父组件中的数据传递给子组件，并子组件修改数据来改变父组件的状态

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="Fage"></MyFooter>
//子组件
props:['age'],
mounted () {
    console.log(this.$emit('update:age',1234567));
 }

 

三. provide和inject ： 跨级访问父组件的数据

他们是配合使用的，provide将父组件中的数据传递给下级，inject在需要子组件或孙组件中注入数据。

通过该方法可以实现跨级访问父组件的数据。

// 父组件 正常引入子组件
  provide() {
    return {
      send: this.val, // 传给子组件
      value: this.data // 传给孙组件
    }
  }

// 子组件

inject: ['send']

// 孙组件
inject: ['value'],

 

四. $attrs

中间件

$attrs其实就是多级组件中的props，他就像一个中间组件，用来传递爷组件给孙组件的数据，使用的时候只需要给父组件的孙组件配置 v-bind=“$attrs”,然后再爷组件中传入孙组件所需的数据，孙组件正常接收。

//父组件
<template>
  <div>
    <Child  :val="val" />
  </div>
</template>
import Child from './child.vue'；
export default {
  components: { Child },
  data() {
    return {
      val: '父组件的data'
    }
  }


// 子组件
<template>
  <div>
    <SunChild v-bind="$attrs" />
  </div>
</template>
<script>
import SunChild from './sunChild.vue';
export default {
  components: { SunChild },
}


// 孙组件
<template>
  <div>
    孙子组件--{{val}}
  </div>
</template>
<script>
export default {
  props: ['val'],
}