vue组件数据传递（.sync、v-model、$attrs、$listeners）

.sync

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

// 父组件
<template>
  <div>
    <div>父组件{{msg}}</div>
    <Son1 :msg.sync="msg"> </Son1>
  </div>
</template>
<script>
import Son1 from './son1.vue'
export default {
  components: {
    Son1
  },
  data() {
    return {
      msg: '123'
    }
  }
}
</script>

//子组件
<template>
  <div>
    <div>子组件{{msg}}</div>
    <button @click="change">change</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  props: {
    msg: {
      type: String,
    }
  },
  methods: {
    change() {
      this.$emit('update:msg', '55555555')
    }
  }
}
</script>

v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。

v-model本质上是个语法糖，其实现原理包含两个步骤：
1、通过v-bind绑定一个value属性
2、通过v-on指令给当前元素绑定input事件

// 父组件
<template>
  <div>
    <div>父组件{{msg}}</div>
    <Son1 v-model="msg"> </Son1>
    <Son1 :msg="msg" @input="msg => this.msg = msg"> </Son1>
  </div>
</template>
<script>
import Son1 from './son1.vue'
export default {
  components: {
    Son1
  },
  data() {
    return {
      msg: '123'
    }
  }
}
</script>

//子组件
<template>
  <div>
    <div>父组件{{msg}}</div>
    <Son1 v-model="msg"> </Son1>
    <Son1 :msg="msg" @input="msg => this.msg = msg"> </Son1>
  </div>
</template>
<script>
import Son1 from './son1.vue'
export default {
  components: {
    Son1
  },
  data() {
    return {
      msg: '123'
    }
  }
}
</script>

$attrs $listeners

$attrs适用于跨多级的组件嵌套的数据传递
$attrs继承所有的父组件属性（除了 prop 传递的属性、class 和 style ），一般用在子组件的子元素上
$ listeners属性是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on=“$listeners” 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

// 父
<template>
  <div>
    <div>父组件{{}}</div>
    <Son1 :name="name"
          :age="age"
          :sex="sex"
          @son="son"> </Son1>
  </div>
</template>
<script>
import Son1 from './son1.vue'
export default {
  components: {
    Son1
  },
  data() {
    return {
      name: 'zhangsan',
      age: 20,
      sex: '男'
    }
  },
  methods: {
    son() {
      console.log("调用了")
    }
  }
}
</script>

//子
<template>
  <div>
    <div>子组件{{$attrs}}-{{$listeners}}</div>
    <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
  </div>
</template>
<script>
import Grandson from './grandson.vue'
export default {
  inheritAttrs: false, /* 阻止组件的根元素继承父组件的属性 */
  components: {
    Grandson
  },
  data() {
    return {
    }
  },
  props: {
  },
  methods: {
  }
}
</script>

//孙
<template>
  <div>
    <div>孙子组件{{$attrs}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
 mounted(){
    this.$listeners.son();
  },
  props: {
  },
  methods: {
  }
}
</script>