Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener

components/Parent.vue

<template><div>我是父组件<br>这里显示父级的msg:{{msg}}<Son :msg="msg" @changeMsg="changeMsg"></Son></div>
</template><script>
/*
$listeners:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。*/import Son from '../components/Son';export default {components: {Son,},data() {return {msg: "我是父级的msg",title:"我是父级传递的title"};},methods: {changeMsg(msg) {this.msg = msg;},},}
</script><style scoped></style>

components/Son.vue

<template><div><hr>我是子组件<br><button @click="handleMsg">点击改变msg</button><Grandson v-bind="$attrs" v-on="$listeners"></Grandson></div>
</template><script>
import Grandson from '../components/Grandson';export default {components: {Grandson,},inheritAttrs:false,created() {console.log("这里是子组件,改变之前的msg为:" + this.$attrs.msg);},updated () {console.log("这里是子组件,改变之后的msg为:" + this.$attrs.msg);},methods: {handleMsg() {this.$listeners.changeMsg("子组件更改的msg");}},}
</script><style scoped></style>

components/Grandson.vue

<template><div><hr>我是孙子组件<br><button @click="handleMsg">点击改变msg</button>{{$attrs.title}}</div>
</template><script>export default {inheritAttrs:false,beforeUpdate () {console.log("这里是孙子组件,改变之前的msg为:" + this.$attrs.msg);},updated () {console.log("这里是孙子组件,改变之后的msg为:" + this.$attrs.msg);},methods: {handleMsg() {this.$listeners.changeMsg("孙子组件更改的msg");}},}
</script><style scoped></style>

App.vue

<template><div id="app"><Parent></Parent></div>
</template><script>
import Parent from './components/Parent'export default {name: 'App',components: {Parent,}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

效果截图：

Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener相关推荐

Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果
文章目录一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
vue父与子组件，子与子组件间的方法调用和通信
子与子之间通信的前提是有一个共同的父亲, 首先,在vue中,$+name是vue系统定义的实例属性或方法,vue的api上面写的有链接实例属性. $parent指的是当前组件的父实例.$refs指的是 ...
vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue 中 mitt 使用，兄弟组件通信
首先,引入"mitt": "^2.1.0", 第二,创建bus.js 文件第三,使用需要在需要通信的两个组件里都引用第二步中的bus 组件1.vue // ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...

Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener

Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener相关推荐

最新文章

热门文章