vue是单向数据流，能够直接将父组件的数据传递给子组件，但是，总会需要其他的数据传递方式
一、父组件向子组件传递数据
父组件
<template>
<div>
<h1>I am The Parent</h1>
<Child v-bind:msg="message"/>
</div>
</template>
<script>
import Child from './Child';
export default {
name:'Parent',
components: {Child},
data(){
return {
message:'i am in The Child & i am from The Parent'
}
}
}
</script>
子组件
<template>
<div>
<h2>I am The Child</h2>
<ul>
<li>{{msg}}</li>
</ul>
<button v-on:click="change">click to change The data</button>
</div>
</template>
<script>
export default {
name:'Child',
props:['msg'],
methods:{
change(){
this.msg="the data chenged";
}
}
}
</script>
## 子组件通过props获得父组件传递的数据，其中可以通过this.msg进行获取并，但是建议对props进行修改，vue会进行报错。
二、子组件向父组件进行传递数据
父组件
<Child v-bind:msg="message" v-on:pass="getData"/>
…………
methods: {
getData(data) {
alert("The data from Child is" + data);
}
}
子组件
<button v-on:click="change">click to change The data</button>
…………
methods:{
change(){
this.$emit('pass','嘿嘿嘿');
}
}
## 父组件通过监听 pass事件，当子组件触发事件时将数据进行传递
三、子组件给子组件传递数据
-
方法一：vue Bus
创建空的vue实例
import Vue from 'vue';
const Bus = new Vue();
export default Bus;
子组件
import Bus from './bus';
//监听事件的组件
created() {
Bus.$on('addTasks', (task) => {
this.tasks.push(task);
});
}
//触发事件的组件
methods:{
addTask() {
Bus.$emit('addTasks',{content: this.newTask, isFinished: false});
……
}
}
-
方法二：vuex(vue的状态管理库)
参考链接：
https://juejin.im/entry/5a14d23d6fb9a044fa197ebb
http://www.cnblogs.com/wisewrong/p/6266038.html
https://segmentfault.com/a/1190000012808179
https://www.cnblogs.com/fanlinqiang/p/7756566.html
https://www.jianshu.com/p/744109395a95
