vue.sync修饰符

vue.sync修饰符用法

作用：父子组件数据双向绑定语法糖（作用等同于v-bind和$emit实现的双向绑定）

例：

Father.vue

<template>
  <div>
    <child :name.sync="name"></child>
    <button @click="al">点击</button>
    <button @click="change">改变</button>
  </div>
</template>
 
<script>
import child from './Child'
export default {
  name: 'list',
  components: {
    child
  },
  data () {
    return {
      name: 'lyh'
    }
  },
  methods: {
    al() {
      alert(this.name)
    },
    change() {
      this.name = '123'
    }
  }
}
</script>

Child.vue

<template>
  <div>
    <input :value="name" @input="abc" type="text">
  </div>
</template>
<script>
  export default {
    props: {
      name: {
        type: String,
        required: true
      }
    },
    methods: {
      abc(e) {
        console.log(e.target.value)
        this.$emit('update:name', e.target.value)
      }
    }
  }
</script>

---

.native用法

当组件或dom没有事件（click，keydown等），给自定义组件添加原生的事件，获取dom元素，将子组件视为普通的html元素

参考：vue中'. native'修饰符的使用_KnifeBlade的博客-优快云博客_.native修饰符

vue 事件中的 .native - musicBird - 博客园

---