Vue 组件 / 通信
2018-03-20 本文已影响16人
羊烊羴
子组件=》父组件
<body>
<div id="app">
<p>{{msg}}</p>
<child @child-send-msg="get"></child>
</div>
<template id="child">
<div>
<button @click="send">send</button>
</div>
</template>
<script>
new Vue({
data:{
msg:""
},
methods:{
get(res){
this.msg=res;
}
},
components:{
"child":{
template:"#child",
data(){
return {
childMsg:"子组件数据"
}
},
methods:{
send(){
this.$emit("child-send-msg",this.childMsg);
}
}
}
}
}).$mount("#app")
</script>
</body>
vue的组件之间的通信类似angular的父子层级之间通信，父组件获取子组件数据步骤大概如下：
- 在子组设置事件，在该事件中设置this.$emit("自定义事件名称"，数据)来传递数据
- 在父模板中将子组件的$emit的自 定义的事件名称，定义一个事件来接收
- 在父组件中被子组件自定义事件触发的事件函数的参数就是接收到的数据，可以直接操作该数据
父组件=》子组件
<body>
<div id="app">
<p @click="parentChange">hello world</p>
<child :msg="parentMsg"></child>
</div>
<template id="child">
<div>
<p>this's child</p>
<span>{{msg}}</span>
</div>
</template>
<script>
new Vue({
data:{
parentMsg: "这是父组件数据"
},
methods:{
parentChange() {
this.parentMsg = "父组件数据变化了"
}
},
components:{
"child": {
template: "#child",
props: ["msg"]
}
}
}).$mount("#app")
//如果我们想要使用一个对象作为props传递所有的属性，我们可以使用不带任何参数的v-bing，例如现在有一个对象todo
//todo:{
//text:'learn',
//isComplete:false
//}
//<todo-item :=todo></todo-item>
//改写法等价于
<todo-item
:text="todo.text"
:is-complete="todo.isCompltet"
></todo-item>
</script>
</body>
vue的子组件获取父组件数据通过props方法，步骤如下：
- 在子组件中设置props属性(数组或对象)
- 在数组中设置变量，用于以后来接收父组件的数据
- 在父组件模板中嵌入的子模板设置自定义属性来接收父组件中的数据，格式， :props中自定义变量名=父组件数据
- 子组件即可使用父模板中的数据展示，或者通过 this.自定义变量名 的形式来调用父组件的数据
子组件更改父组件数据
在vue2.0版本刚刚推出时，vue中废弃了.sync方法，如果子组件想要更改父组件数据，那么要求父组件的这些数据必须是父组件包裹在一个对象中将其返回给子组件的
<body>
<div id="app">
<p>{{parentMsg.parent}}</p>
<child :msg="parentMsg"></child>
</div>
<template id="child">
<div>
<p @click="click">{{msg.parent}}</p>
</div>
</template>
<script>
new Vue({
data:{
parentMsg:{
parent:"父组件数据"
}
},
components:{
"child":{
template:"#child",
props:["msg"],
methods:{
click(){
this.msg.parent="子组件改变了父组件数据"
}
}
},
}
}).$mount("#app")
</script>
</body>
但是在vue2.3版本中又再次加入了.sync方法
<body>
<div id="app">
<p>{{parent}}</p>
<child :msg.sync="parent"></child>
</div>
<template id="child">
<div>
<p @click="change">{{msg}}</p>
</div>
</template>
<script>
//如果我们要使用sync修饰符，那么我们不需要对父组件的数据用对象包裹，但需要注意的是，和1.0版本中的sync修饰符用法有一些区别，需要我们手动的对其进行触发，格式如下：
//this.$emit("update:要修改的自定义的变量名", "修改后的数据")
new Vue({
data:{
parent:"父组件数据"
},
components:{
"child":{
template:"#child",
props:["msg"],
methods:{
change(){
this.$emit("update:msg","子组件改变了父组件数据");
}
}
}
}
}).$mount("#app")
</script>
</body>
vue的单一事件中心管理组件通信
那么如何在vue中实现同级之间的组件通信，可能我们会想到给两个组件设置一个父组件然后通过子组件$emit传递数据给父组件，然后通过props来获取，这是一个不错的解决方法，但是在存在大量组件的情况下这种方法会很繁琐，下面我们介绍一种更加便捷的方法
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
<script>
//首先建立一个空的实例对象
var vm = new Vue({})
//接下来创建组件
var A = {
template: `
<div>
<h4>this's A</h4>
<p>{{msg}}</p>
<input type="button" value="send" @click="send">
</div>
`,
data() {
return {
msg: "hello A"
}
},
methods: {
send() {
vm.$emit("msg-a", this.msg);//为A组件添加方法，在按钮点击时为实例vm添加msg-a事件，并发送A组件的数据：msg
}
}
},
B = {
template: `
<div>
<h4>this's B</h4>
<p>{{msg}}</p>
<input type="button" value="send" @click="send">
</div>
`,
data(){
return{
msg:"hello B"
}
},
methods:{
send(){
vm.$emit("msg-b",this.msg);
}
}
},
C={
template:`
<div>
<h4>this's C</h4>
<p>接收的A的数据是：{{a}}</p>
<p>接收的B的数据是：{{b}}</p>
</div>
`,
data(){
return {
a:"",
b:""
}
},
mounted(){//mounted vue2.0生命周期函数，表示模板渲染完成执行的操作
vm.$on("msg-a",function(data){ //监听实例vm的msg-a事件，并结接收是数据
this.a=data;
}.bind(this))
vm.$on("msg-b",function(data){
this.b=data;
}.bind(this))
}
}
new Vue({
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
}).$mount("#box")
//其实整体来看vue的单一事件中心管理的本质就是通过利用实例方法，创建一个空的实例利用$emit触发自定义事件的同时并将当前组件的数据绑定到实例对象上，在需要获取该组件数据的组件中通过$on来接收之前的自定义的事件，并且接收之前被绑定的组件的数据到该组件的data中
</script>
</body>
