vue 2.x之组件的数据传递(一)

时间:2022-07-13 00:02:06

这是根据官方提供的脚手架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方式的兄弟组件的数据传递;

  1. 在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进行数据传递;