vue 2.x之组件的数据传递（一）
这是根据官方提供的脚手架vue-cli搭建，通过简单的案例来介绍vue数据的传递的方式，根据自己平时用到的，来做简单的总结；
1.父组件传递数据给子组件
父组件传递数据给子组件，需要把子组件引入，并挂载到当前父组件的vue实例上，这样父组件就能访问到该组件。子组件上自定一个方法来作为传的桥梁，在子组件上使用props来接收数据；
父组件：
1 <template>
2 <div class="hello">
3 <child-comp v-bind:send-info='sendInfo'></child-comp>
4 </div>
5 </template>
6
7 <script>
8 //引入子组件
9 import childComp from './son';
10 export default {
11 name: 'father',
12 data () {
13 return {}
14 },
15 computed:{
16 //需要传递的信息
17 sendInfo(){
18 let sendSonInfo;
19 sendSonInfo ={
20 age:'18',
21 name:'zhangsan'
22 };
23 return sendSonInfo;
24 }
25 },
26 //挂载到vue的实例上
27 components:{
28 childComp
29 }
30 }
31 </script>
子组件:
<style type="text/css"></style>
<template>
<div class="son">
<div class="name">
{{sendInfo.name}}
</div>
<div class="age">
{{sendInfo.age}}
</div>
</div>
</template>
<script type="text/javascript">
export default {
name:'son',
data(){
return {}
},
props:{
//子组件接收父组件传递来的数据
sendInfo:{
type:Object, //传递的数据类型
required:true, //是否必须
default:{} //默认传递类型
}
}
}
</script>
在父组件中引入子组件，使用v-bind（缩写：）动态绑定组件prop到表达式；
在子组件中使用props来接收传递过来的数据；
2.子组件传递给父组件数据
既然父组件能传递数据给子组件数据，那么子组件也要能出传递数据给父组件，同样也要在父组件引入，挂载，同时要定义一个方法来接收子组件传递来的数据，而子组件通过 $emit 来实现数据传递；第一个参数是父组件定义的方法名，第二个参数是要传递的数据，可以是字符串，Boolean，对象，数组等；
子组件：
<style type="text/css"></style>
<template>
<div class="son"></div>
</template>
<script type="text/javascript">
export default {
name:'son',
data(){
return {}
},
mounted(){
this.$emit('get-info','我是子组件传递来的数据');
}
}
</script>
父组件:
<template>
<div class="hello">
<child-comp v-on:get-info='getInfo'></child-comp>
<div>{{data}}</div>
</div>
</template>
<script>
//引入组件
import childComp from './son';
export default {
name: 'father',
data () {
return {
data:'' // 定义变量来接收子组件传递来的数据
}
},
methods:{
//接收子组件传递来的数据
getInfo(val){
this.data = val;
}
},
//挂载到vue的实例上
components:{
childComp
}
}
</script>
父组件接收子组件数据，用v-on（缩写@）绑定事件监听器。
3.兄弟组件的数据传递
在父子组件数据的传递的过程，还有兄弟组件的数据传递。兄弟组件的传递需要借助于一个空的vue实例来实现，如果传递的数据量不大，可以用此方法，如果大量数据的传输，要使用vuex来实现数据的传递。下面实例来展示非vuex方式的兄弟组件的数据传递；
- 在main.js里的实例上挂载一个空的vue实例，来作为兄弟组件数据传递的桥梁
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App }, data:{ eventBus:new Vue() //创建eventBus的vue实例，作为桥梁 } })2.在父组件中引入兄弟组件
<template> <div class="hello"> <child-comp></child-comp> <brother-comp></brother-comp> </div> </template> <script> //引入组件 import childComp from './son'; import brotherComp from './brother'; export default { name: 'father', data () { return {} }, components:{ childComp, brotherComp } } </script>3.在组件里添加方法和要传递的数据
<style type="text/css"></style> <template> <div class="son"> <input type="button" name="" value="确定" @click='sendInfo'> </div> </template> <script type="text/javascript"> export default { name:'son', data(){ return {} }, methods:{ sendInfo(){ this.$root.eventBus.$emit('sendBrotherinfo','我是兄弟组件'); } } } </script>4.在兄弟组件里接收传来的数据
<template> <div class="brother"> <div>{{data}}</div> </div> </template> <script type="text/javascript"> export default{ name:'brother', data(){ return { data:'' //声明变量来接收 } }, created(){ this.$root.eventBus.$on('sendBrotherinfo', val =>{ console.log(val); this.data = val; }); } } </script>以上组件只能实现单个页面，不同组件的数据传递，如果想要在不同页面的数据传递，这就要借助于vuex来实现，下一篇来介绍vuex和使用vuex进行数据传递；
