.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>