非父子组件间的通讯：中央事件总线、父链、子组件索引
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Vue.2.6.10.js"></script>
</head>
<body>
<div id="app1"> {{ message }} <!-- <component-01 :is="component-01"></component-01>????? -->
<component-01 ></component-01>
</div>
<div id="app2"> {{ message }} <component-02></component-02>
</div>
<div id="app3">
<button @click = "handleRef">A</button>
<!-- <button @click = "handleRef">B</button> <button @click = "handleRef">C</button> --> {{ message }} <component-a ref="comA" ></component-a>
<!-- <component-b ref="comB" ></component-b> <component-c ref="comC" ></component-c> -->
</div>
<br>
<!-- 并不能经过上面那种方式动态切换组件 试试这个 -->
<div id="app4">
<button @click="com = 'comA'">comA</button>
<button @click="com = 'comB'">comB</button>
<button @click="com = 'comC'">comC</button>
<div :is = "com"></div>
<component :is="com"></component>
</div>
</body>
<script>
//在Vue2.X中，推荐使用一个空的中央事件总线bus，即一个中介（相似于链接租房者与房东的房屋中介）
var bus = new Vue(); Vue.component('component-01',{ template:'<button @click="handleEvent" >传递事件</button>', methods: { handleEvent:function(){ bus.$emit('on-message','该内容来自组件01'); } }, }); // 在app1初始化时，即在生命周期mounted钩子里监听（持续监听？）来自bus的事件，
// 而在组件01中点击按钮会经过bus将这个事件传递出去
var app1 = new Vue({ el:"#app1", data:{ message:'' }, mounted() { var _this = this;//在一个代码片断里this有可能表明不一样的对象,而编码者但愿_this表明最初的对象
//在实例初始化时监听来自bus实例的事件
bus.$on('on-message',function(msg){ _this.message = msg; }) }, }); Vue.component('component-02',{ template:'<button @click="handleEvent">经过父链直接修改数据</button>', methods:{ handleEvent:function(){ //访问到父链后能够进行任何操做，包括修改父组件数据等
this.$parent.message = '来自组件02的内容'; // 虽然这种操做可以实现，但事实上子组件应该避免依赖父组件的数据，更不该该去修改（应该缓存一份？）
//父子组件最好经过props和$emit来通讯
console.log(this.$parent);//懂了！是整个Vue（app2）实例！
} } }); var app2 = new Vue({ el:"#app2", data:{ message:'' }, }); Vue.component('component-a',{ template:'<div>子组件A</div>', data() { return { message:'来自子组件A!' } }, }); var app3 = new Vue({ el:"#app3", data:{ message:'', }, methods:{ handleRef:function(){ console.log( this, this.$refs, this.$refs["comA"], this.$refs["comA"].message //this.$refs.comA是错误的写法 // NaN?
//因在组件渲染完成后再填充？
); this.message = this.$refs["comA"].message; } }, mounted(){ console.log(this.$children); } }); Vue.component('comA',{ template:'<div>子组件A</div>', }); Vue.component('comB',{ template:'<div>子组件B</div>', }); Vue.component('comC',{ template:'<div>子组件C</div>', }); var app4 = new Vue({ el:"#app4" , data:{ com:'comA' } }); </script>
</html>
相关文章
- 1. 非父子组件通讯-中央事件总线
- 2. Vue.js 父子组件及非父子组件间实现通讯
- 3. 非父子组件之间的通讯
- 4. vue2.0父子组件以及非父子组件如何通讯
- 5. Vue父子组件及非父子组件如何通讯
- 6. Angular7父子组件以及父子组件之间的通讯 非父子组件之间传值
- 7. 非父子组件间通讯
- 8. Vue子组件向父组件通讯，父组件向子组件通讯
- 9. 【VUE】vue父子组件通讯 以及 非父子组件通讯的方法
- 10. Vue.js父子组件和非父子组件间的传值通讯
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • MyBatis的核心组件 - MyBatis教程
- • SpringBoot中properties文件不能自动提示解决方法
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
