vue如何实现父子组件通信，以及非父子组件通信（待看）
https://vuefe.cn/v2/guide/components.html#非父子关系var vm = new Vue({el: '#list',ready: function(){var _this = this;var url = 'http://192.168.1.111:8080/api/v2/getCommonCourses';
·
http://www.cnblogs.com/luozhihao/p/5329440.html（vue特点及双向数据绑定）
https://vuefe.cn/v2/guide/components.html#
非父子关系
var vm = new Vue({
el: '#list',
ready: function(){
var _this = this;
var url = 'http://192.168.1.111:8080/api/v2/getCommonCourses';
$.post(url,{'apiKey':apikey},function(data){
console.log(data);
if(data.status === 0) {
_this.$broadcast('parent-msg',data.data);
}
},'json');
},
components: {
courseList : List
},
});
new Vue({
el: '#condition',
data: {
isChecked: [1,0],
},
methods {
common: function() {
this.isChecked = true;
},
enterprise: function() {
this.idChecked = false;
}
}
})
这样的两个组件之间的通讯应该通过共同的父组件，不管是通过
refs方式：parent.$refs.list.<Method>
customer event方式: 先dispatch给父组件，再由父组件broadcast给子组件
props方式
这里推荐props方式。那么这里应该由三个组件：
FilterList (parent)
Condition (child)
List (child)并且由parent来享有数据：list和filterCondition，通过props传给child。
<div id='app'>
<filter-list></filter-list>
</div>
<template id='filter-list-temp'>
<div>
<h4>filter list</h4>
<condition :filter-text.sync="filterText"></condition>
<list :items="filteredItems"></list>
</div>
</template>
<template id='condition-temp'>
<div>
<input v-model="filterText"/>
</div>
</template>
<template id='list-temp'>
<div>
<p v-for="item in items">
{{item}}
</p>
</div>
</template>
Vue.component('condition', {
template: '#condition-temp',
props: ['filterText']
});
Vue.component('list', {
template: '#list-temp',
props: ['items']
})
Vue.component('filter-list', {
template: '#filter-list-temp',
data: function() {
return {
filterText: '',
items: ['Jack Yang','Angel','New York']
}
},
computed: {
filteredItems: function() {
return this.$data.items.filter(function(item) {
return item.indexOf(this.$data.filterText) != -1;
}.bind(this));
}
}
})
new Vue({
el: '#app'
})
父子通信
vue父子组件通信
父子组件之间可以通过props进行通信：
组件的定义：
1.创建component类：
1
2
3
var
Profile = Vue.extend({
template:
"<div>Lily</div>"
;
})
2.注册一个tagnme:
Vue.component("me-profile",Profile);//全局注册
局部注册：
1
2
3
4
5
6
7
var
vm =
new
Vue({
el:
"#todo"
,
components: {
"my-profile"
: Profile
},
...
}
模板注意事项：
因为 Vue 就是原生的DOM，所以有些自定义标签可能不符合DOM标准，比如想在
table 中自定义一个
tr，如果直接插入
my-component 不符合规范，所以应该这样写：
1
2
3
4
<table>
<tr is=
"my-component"
></tr>
</table>
在子组件中有一个this.$parent和this.$root可以用来方法父组件和跟实例。（但是不推荐）
Vue中子组件可以通过事件和父组件进行通信。向父组件发消息是通过this.$dispatch,而向子组件发送消息是通过this.$boardcast,这里都是向所有的父组件和子组件发送消息。
子组件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
props: {
url: {
type: Array,
default
:
function
() {
return
[]
}
}
}，
methods: {
add:
function
() {
this
.$dispatch(
"add"
,
this
.input);
//这里就是向父组件发送消息
this
.input =
""
;
}
}
父组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
data() {
return
{
url: .....
}
}，
events: {
add:
function
(input) {
if
(!input)
return
false
;
this
.list.unshift({
title: input,
done:
false
});
}
}
|
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)