vue $listeners用法记录
有了这个$listenersproperty,你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。下面直接上代码,$listeners就是多级子组件emit传递偷懒写法(还有一个attr)<template><div>这是子组件1-1</div></template><script>export
·
有了这个 $listeners
property,你就可以配合 v-on="$listeners"
将所有的事件监听器指向这个组件的某个特定的子元素。下面直接上代码,$listeners就是多级子组件emit传递偷懒写法(还有一个attr)
<template>
<div>这是子组件1-1</div>
</template>
<script>
export default {
mounted: function() {
this.$emit("child2Info","这是子组件1-1-1发送的信息")
}
};
</script>
<template>
<div class="child1-page">
<div>这是子组件-1</div>
<child-2 v-on="$listeners"></child-2>
</div>
</template>
<script>
import child2 from "./Child2"
export default {
name: 'Child1',
components:{child2},
props: {},
data() {
return {}
},
created() { },
mounted() { },
methods: {}
}
</script>
<template>
<div class="father-page">
<div>这是父组件</div>
<child-1 @child2Info="getInfo"></child-1>
</div>
</template>
<script>
import child1 from './Child1'
export default {
name: 'Father',
components:{child1},
props: {},
data() {
return {}
},
created() { },
mounted() { },
methods: {
getInfo:function(data){
console.log(data)
//这是子组件1-1-1发送的信息
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)