组件A里包含组件B,组件B里包含组件C,组件C的值要传值给组件A,那么就要用$listeners传值。
$listeners跟子传父差不多
1.在孙组件里定义事件,通过$emit把值传出去。
<template> <div> <button @click="trans()">传值</button> </div> </template> <script> export default { name: "Child", data () { return { cdata:"孙组件" }; }, methods: { trans(){ this.$emit('test',this.cdata) } }, } </script>
2.在子组件中定义v-on="$listerners"
<child v-on="$listeners"></child>
3.父组件通过传过来的自定义事件,获取孙组件的值
<template> <div id="app"> <HelloWorld @test="getValue($event)"/> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld }, data(){ return { hello:"hello" } }, methods: { getValue(val){ console.log(val); // val就是孙组件传过来的 this.hello = val } }, } </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步