未加星标

vuejs父子组件通信的问题

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
父子组件之间可以通过props进行通信:

组件的定义:

1.创建component类:

var Profile = Vue.extend({
template: "<div>Lily</div>";
})

 2.注册一个tagnme:

Vue.component("me-profile",Profile);//全局注册

局部注册:

var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
},
...
}

模板注意事项:

 因为 Vue 就是原生的DOM,所以有些自定义标签可能不符合DOM标准,比如想在 table 中自定义一个 tr,如果直接插入 my-component 不符合规范,所以应该这样写:

<table>
<tr is="my-component"></tr>
</table>

在子组件中有一个this.$parent和this.$root可以用来方法父组件和跟实例。(但是不推荐)

Vue中子组件可以通过事件和父组件进行通信。向父组件发消息是通过this.$dispatch,而向子组件发送消息是通过this.$boardcast,这里都是向所有的父组件和子组件发送消息。

子组件:

props: {
url: { type: Array, default: function() { return [] }
}
},
methods: {
add: function() {
this.$dispatch("add", this.input); //这里就是向父组件发送消息
this.input = "";
}
}  

父组件:

data() {
return {
url: .....
}
},
events: {
add: function(input) {
if(!input) return false;
this.list.unshift({
title: input,
done: false
});
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:vuejs父子组件通信的问题
本站链接:http://www.codesec.net/view/524304.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(51)