组件内通讯
html文件
<body>
<div id="app">
<h1>组件</h1>
<aaa></aaa>
<bbb></bbb>
</div>
<template id="bbb">
<div>
<h1>{{question}}</h1>
<ul>
<li @click='select(fruit)' v-for="fruit in options">{{fruit}}</li>
</ul>
<p>你选择的结果是:{{rs}}</p>
<!-- aaa为静态数据 -->
<bbb-child1 @child-msg='getMsg' :msg='rs' :aaa="11"></bbb-child1>
</div>
</template>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
js文件
//全局组件
var AAA = Vue.extend({
template:"<h3 @click='change'>{{msg}}</h3>",
data(){
return { msg:"这是组件中的数据"}
},
methods:{
change(){
this.msg +="-!!"
}
}
})//组件中，data必须是函数
Vue.component('aaa',AAA)
var vue = new Vue({
el:"#app",
components:{
'bbb':{//'bbb'为组件的名字(<>中的红字)
data(){
return {
question:"你喜欢吃什么水果？",
options:["桃子","香蕉","葡萄"],
rs:''
}
},
methods:{
select(rs){
this.rs = rs;
},
getMsg(data){
this.rs = data;
}
},//子组件
components:{
'bbb-child1':{
//从父亲接受数据 父亲往儿子传参
//props:['msg','aaa'],
props:{
'msg':String,
'aaa':Number
},//中括号为数组传参，大括号为对象传参，可以设定参数类型
data(){
return{
//msg:"123" 父亲传过来的数据不能更改。可以传给其他变量后再更改
msg_child:this.msg,
child:"aaaaa"
}
},
//从儿子向父亲传参
methods:{
send(){
msg_child = '123',
console.info(msg_child),
//emit 触发 将数据child传给父亲方法getMsg的data参数
this.$emit('child-msg',this.child)
}
},
template:"<h6 @click='send'>{{this.msg}},aaa:{{aaa+1}}</h6>"//双引号内的内容为组件架构
}
},
template:"#bbb",//选定id为'bbb'的template为组件架构
}
}
})
组件间通讯
<!DOCTYPE html>
<html>
<head>
<title>组件间通讯</title>
<meta charset="utf-8">
</head>
<body>
<div id='app'>
<button @click="showMsg">展示孩子中的数据</button>
<com-a ref='c1'></com-a>
<com-b ref='c2'></com-b>
<com-c ref='c3'></com-c>
孩子中的数据:{{msg}}
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
//数据传输总线
var Event = new Vue();
var A={
template:`
<div>
<span>我是组件A</span> ->{{a}}
<input type="button" value="把A传给C" @click='send'/>
</div
`,
methods:{
send(){
//emit(事件名，参数)
Event.$emit('a-msg',this.a)
}
},
data(){
return {a:"我是a数据",msg:"我是a数据"}
}
};
var B={
template:`
<div>
<span>我是组件B</span> ->{{b}}
<input type="button" value="把B传给C" @click='send'/>
</div
`,
methods:{
send(){
Event.$emit('b-msg',this.b)
}
},
data(){
return {b:"我是b数据",msg:"我是b数据"}
}
};
var C = {
template:`
<div>
<h3>我是C组件</h3>
<span>接收到A组件的数据为：{{a}}</span>
<br />
<span>接收到B组件的数据为：{{b}}</span>
<button @click="readFromParent">读取父亲中的值</button>
{{pmsg}}
</div>
`,
data(){
return {
a:'',
b:'',
msg:"我是c数据",
pmsg:''
}
},
mounted(){
var self = this;
//监听 on(事件名，函数)
Event.$on('a-msg',function(val){
self.a=val
})
Event.$on('b-msg',function(val){
self.b=val //bind的this为外层的this
}.bind(this))
console.info('mounted')
},
methods:{
readFromParent(){
this.pmsg = this.$parent.msg
}
},
created(){
console.info('created')
} //mounted、created都为系统按照生命周期自动调用的函数
}
var vue = new Vue({
el:'#app',
components:{
'com-a':A,
'com-b':B,
'com-c':C
},
data:{
msg:'这是父亲中的数据'
},
methods:{
// showMsg(){
// this.msg = '';//使数据不重复显示
// //通过children访问孩子节点
// for(var i = 0;i < this.$children.length;i++){
// this.msg += this.$children[i].msg + "|";
// }
// }
showMsg(){
this.msg = '';
//给孩子节点添加ref属性，父亲通过refs访问指定子节点
this.msg = this.$refs.c3.msg;
}
},
})
</script>
</body>
</html>
