Vue组件间的通信
2017-09-11 18:05
351 查看
前言:本文主要介绍在Vue中组件与组件如何进行信息传递。分为三部分:
父组件向子组件
子组件向父组件
非父子组件通信
一、父组件向子组件通信(props)①、父组件向子组件传递字符串
<template> <div id="m-dialog"> <!-- 该种方法“只能传递字符串”, 将child的data中的value = "str";不需要父组件data中有数据 --> <child value="传递固定字符串"></child> </div> </template>
Vue.component("child", { // 获取value的依赖 props:["value"], template: '<span>{{ value }}</span>' }); new Vue({ // 这里的el可视为父组件 // 所以下面这个片段是放在#m-dialog里面的 el:"#m-dialog" });
②、父组件向子组件传递数据
<div id="m-dialog"> <!-- 将组件的数据state与父组件的数据flag绑定在了一起 执行 vue1.flag= false 会对组件数据进行重新渲染 --> <child v-bind:state="flag"></child> </div>
Vue.component("child", { // 获取value的依赖 props:["state"], template: '<span>{{ state }}</span>' }); var vue1 = new Vue({ // 这里的el可视为父组件 // 所以下面这个片段是放在#m-dialog里面的 el:"#m-dialog", data: { flag: true } });使用props传递值的时候可能有多个参数,这时候需要注意顺序问题
详情请点击
二、子组件向父组件通信($emit())
因为父子组件的数据绑定是单向,故子组件的数据变化不会影响到父组件,故需要通过事件的监听来主动通知父组件对应子组件的数据变化
<div id="m-dialog"> <!-- v-on:cancle="other"表示如果触发组件中的cancle事件 则连带触发父组件中的other时间 --> <child v-on:cancle="other"></child> </div>
Vue.component("child", { template: '<button v-on:click="cancle">我是按钮,点我触发父组件事件</button>', methods: { cancle: function() { // 与父组件通信一定要加上这句话 this.$emit('cancle'); } } }); var vue1 = new Vue({ // 这里的el可视为父组件 // 所以下面这个片段是放在#m-dialog里面的 el:"#m-dialog", data: { flag: true }, methods: { other: function() { alert(); } } });
三、非父子组件通讯
// 建立一个空容器 var bus = new Vue() // 在组件 B 创建的钩子中监听事件 // $on用于监听事件 bus.$on('event', function (id1,id2) { // ... alert(a);// 弹出1 alert(a);// 弹出2 }) // 触发组件 A 中的事件 // 触发了event事件, 后面为参数 bus.$emit('event', 1, 2);
如果是比较庞大的组件间通讯可以使用vuex,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex
友情推荐:Vue 进阶教程之:非父子组件通信方法(非Vuex)
传送门
瞎谈:刚接触vue,学习的东西很多,如有错误,敬请提醒,共同进步~~
相关文章推荐
- 详解Vue组件之间的数据通信实例
- vue2.0父子组件以及非父子组件如何通信
- Vue父子组件互相通信实例
- vue组件间的通信
- vue2.0之父子组件通信的理解
- vue父子组件通信
- 使用bus实现Vue组件间通信
- Vue.js入门学习--父子组件的说明和简单通信(十)
- vue组件通信你还在用笨重的vuex吗
- vue组件之间的通信
- Vue中父组件向子组件通信的方法
- Vue父子组件通信实践
- Vuejs——(10)组件——父子组件通信
- vue父组件和子组件的通信
- vue2.0父子组件间通信
- Vue组件通信
- vue2.0中的组件通信
- vue2.0 组件之间的通信
- vue之父子组件间通信实例讲解(props、$ref、$emit)