vue2.0组件通信各种情况总结与实例分析

 

Props在vue组件中各种角色总结

在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下:

使用props传递数据---组件内部

//html
<div id="app1">
<i>注意命名规定:仅在html内使用my-message</i>
<child my-message="组件内部数据传递"></child>
</div>
//js
<script>
Vue.component('child', {
props: ['myMessage'],
template: '<mark>{{ myMessage }}<mark/>'
});
new Vue({
el: '#app1'
})
</script>

动态props通信---组件与根节点(父子之间)

<div id="app2">
<input v-model="parentMsg">
<br>
<child :parent-msg="parentMsg"></child>
</div>
<script>
Vue.component('child', {
props: ['parentMsg'],
template: '<mark>{{ parentMsg }}<mark/>'
});
new Vue({
el: '#app2',
data: {
parentMsg: 'msg from parent!'
}
})
</script>
  • 对比分析:
  • 例子1:

    <comp some-prop="1"></comp>
    //组件内部数据传递,对应字面量语法:传递了一个字符串"1"
  • 例子2:

    <comp v-bind:some-prop="1"></comp>
    //组件与根节点数据传递,对应动态语法:传递实际的数字:js表达式

    单向数据流动特点:父组件属性变化时将传导给子组件,反之不可

  • 两种改变prop情况
  • 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

    //定义一个局部data属性,并将 prop 的初始值作为局部数据的初始值
    props: ['initialCounter'],
    data: function () {
    return { counter: this.initialCounter }
    }
    //定义一个局部computed属性,此属性从 prop 的值计算得出
    props: ['size'],
    computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
    }
    }

    子组件索引

    尽管有 props 和 events ,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID

    <div id="parent">
    <!-- vm.$refs.p will be the DOM node -->
    <b ref="p">hello</b>
    <!-- vm.$refs.child will be the child comp instance -->
    <user-profile v-for='i in 3' ref="profile"></user-profile>
    </div>
    <script>
    var userPf=Vue.component('user-profile',{
    template:'<div>hello $refs</div>'
    });
    var parent = new Vue({ el: '#parent' });
    // 访问子组件
    var child = parent.$refs.profile;
    console.log(child[0]);
    console.log(parent.$refs.p);
    </script>

    $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

数据反传---自定义事件

自定义事件的根基在于每个vue实例都实现了事件接口(Event interface)
Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

  • 监听:$on(eventName)
  • 触发:$emit(eventName)

    <div id="app3">
    <p>Look at the parent's data: <mark>{{t}}</mark> & the child's data: <mark>{{childWords}}</mark></p>
    <child v-on:add="pChange"></child>
    <child v-on:add="pChange"></child>
    <child v-on:click.native="native"></child>
    </div>
    <script>
    Vue.component('child', {
    template: `<button @click="add">{{ c }}</button>`,
    data: function () {
    return {
    c: 0,
    msg: 'I am from child\'s data'
    }
    },
    methods: {
    add: function () {
    this.c += 1;
    this.$emit('add',this.msg);
    }
    },
    });
    new Vue({
    el: '#app3',
    data: {
    t: 0,
    childWords: ''
    },
    methods: {
    pChange: function (msg) {
    this.t += 1;
    this.childWords=msg;
    },
    native:function () {
    alert('I am a native event ,which comes from the root element!');
    }
    }
    })
    </script>

    兄弟间通信---简单场景用bus,复杂场景用vuex

<div id="app4">
<display></display>
<increment></increment>
</div>
<script>
var bus = new Vue();
Vue.component('increment', {
template: `<button @click="add">+</button>`,
data: function () {
return {count: 0}
},
methods: {
add: function () {
bus.$emit('inc', this.count+=1)
}
}
});
Vue.component('display', {
template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
data: function () {
return {c: 0}
},
created: function () {
var self=this;
// bus.$on('inc', function (num) {
// self.c = num
// });
bus.$on('inc', (num) =>
this.c = num
);
}
});
vm = new Vue({
el: "#app4",
})
</script>

总结:Vue中关于组件间及组件与根节点间通信都可以人为是父子兄弟间的通信,另外父子关系是相对的即与上下文有关(比如A组件的父组件可能是B组件的子组件);上述四个例子分别演示了不同组件通信的机制。
澄清了上述问题不难理这句话:
编译作用域---父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。分发内容是在父组件作用域内编译

 

通信vue2.0组件的更多相关文章

  1. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  2. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  3. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  4. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  5. Vue2.0组件实现动态搜索引擎(一)

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

  6. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  7. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  8. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  9. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

随机推荐

  1. ubuntu14.0安装arm-linux-gcc交叉编译环境

    1.下载文件: 安装包:arm-linux-gcc-4.5.1-v6-vfp-20120301.tgz 下载地址  http://pan.baidu.com/s/1pJwQ6Sj 2.开始安装(建议大 ...

  2. 推荐几个优秀的java爬虫项目

    java爬虫项目   大型的: Nutch apache/nutch · GitHub 适合做搜索引擎,分布式爬虫是其中一个功能. Heritrix internetarchive/heritrix3 ...

  3. ReactiveCocoa之UI篇

    前言: 上一篇讲ReactiveCocoa是函数响应式编程,并将多种事件响应的方式统一起来,使得不同的事件响应方式高度统一.同时也讲了ReactiveCocoa框架里面常见的几个概念.接下来基于那几个 ...

  4. iOS开发笔记4:HTTP网络通信及网络编程

    这一篇主要总结iOS开发中进行HTTP通信及数据上传下载用到的方法.网络编程中常用的有第三方类库AFNetworking或者iOS7开始新推出的NSURLSession,还有NSURLSession的 ...

  5. HTML列表元素

    HTML定义了3类列表: 1.有序列表(通常用数字编号) 2.无序列表(通常前面加原点) 3.自定义列表(列表项目,带有集成的定义) 有序列表和无序列表均为列表中的每一项使用列表项元素(<li& ...

  6. Java眼中的XML--文件读取--2 应用SAX方式解析XML

    1.获取一个SAXParserFactory的实例.2.通过factory获取SAXParser实例.  3.新建一个包和继承自DefaultHandler的类.  因为SAX遍历方式,比如便利一个节 ...

  7. 网站的SEO

    提高网站SEO排名的策略除了要有高质量的内容,还有几种方案可以使用 1.关键词的设定 合适的关键词可以提升搜索引擎中的排名 ①最重要的是html中的title标签,这也是一个页面的最重要的概括,所以尽 ...

  8. solrcloud 配置实践

    1.环境 3台虚拟机:192.168.26.129.192.168.26.131.192.168.26.132,使用命令sudo iptables -F 关闭防火墙 Solr: solr-6.1.0 ...

  9. git 换行符LF与CRLF转换问题

    git 换行符LF与CRLF转换问题 一.背景 在各操作系统下,文本文件所使用的换行符是不一样的.UNIX/Linux 使用的是 0x0A(LF),早期的 Mac OS 使用的是0x0D(CR),后来 ...

  10. 本地数据下,radiobutton和图片组合,利用adapter+listview进行单选

    浮生偷得半日闲,等接口定义的过程中,重新复习下adapter+listview实现单选的方法 主界面 <RelativeLayout xmlns:android="http://sch ...