$attrs
和$listeners
爷孙组件传值
情景
A组件内部嵌套B组件,B组件内部嵌套C组件
A组件代码
<div class="grand">
{{count}}父组件
{{msg}}父组件
<child2 :count="count" :msg="msg" @handleCount="handleCount" @handleMsg="handleMsg"></child2>
</div>
data () {
return {
count: 1,
msg: "123"
}
},
methods: {
handleCount (val) {
this.count = val
},
handleMsg (val) {
this.msg = val
}
}
B组件代码
<div class="father">
<button @click="handleClick">子组件点击</button>
<p>{{count}}子组件</p>
`<child1 v-bind="$attrs" v-on="$listeners"></child1>`
</div>
export default {
name: "father",
inheritAttrs: false,
props: ["count"],
components: {
child1: son
},
methods: {
handleClick () {
this.$emit("handleCount", 2)
}
}
}
C组件代码
<div class="son">
<div>{{msg}}</div>
<button @click="handleClick">孙组件点击</button>
</div>
export default {
name: "son",
props: ["msg"],
data () {
return {
}
},
methods: {
handleClick () {
this.$emit("handleMsg", "456")
}
}
}
情景
自定义组件绑定原生事件使用$listeners
父组件代码
<base-input v-on:focus="onFocus"></base-input>
import default4 from "./default4"
export default {
name: "default3",
components: {
baseInput: default4
},
data () {
return {
}
},
methods: {
onFocus () {
console.log(1111)
}
}
}
子组件代码
<label>
<input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" />
</label>
<!--input组件不是根元素 不能触发input的事件 -->
<!--当input元素是根元素时 父组件使用v-on:focus.native="onFocus" .native修饰符 触发 -->
export default {
name: "default3",
props: ["value"],
data () {
return {
}
},
computed: {
inputListeners () {
var vm = this
var newObj = Object.assign({}, this.$listeners, {
input: function () {
vm.$emit('input', event.target.value)
}
})
return newObj
}
},
methods: {
}
}
.sync 修饰符
父组件 :page.sync="page"
子组件 this.$emit("update:page",10)
配合使用