Vue.js 父子组件之间数据传输

2020-03-04 0 By admin

一、父子组件

组件树:组件和组件之间存在层级关系;而其中一种非常重要的关系就是父子组件的关系。
Vuejs中父子关系组件的编写结合:

<div id="app">
<parent></parent>
</div>

<!-- 子组件的模板-->
<template id="child">
    <div>子组件内容</div>
</template>

<!--Vue 的模板template 中只能由一个根元素
如下:元素都在id为root的DIV中;如果将这个div删除掉,则不符合上面的要求,就会报错!-->
<template id="parent">
    <div id="root">
    <div>父组件内容</div>
    <child></child>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const child = Vue.extend({
        template: "#child"
    })
    const parent = Vue.extend({
        template: "#parent",
        components:{
            'child':child
        }
    })
    const app = new Vue({
        el: "#app",
        components: {
            'parent': parent
        }
    })
</script>

二、父子组件之间数据传输

当我们将页面设置为组件化开发后,就会遇到组件间数据传输的问题。比如:页面初始化中父组件要向子组件中传输内容数据;在客户浏览过程中,子组件可能要向父组件传递客户提交的数据。

2.1、父组件向子组件传输数据

在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

代码编写思路

Vue 通过在子组件中设置 Props 属性(相当于形参),从父组件中接受数据。
在父组件中可以使用 data 属性定义好向子组件中传输的数据变量(相当于实参)。
在父组件的范围内使用子组件时,将形参和实参间的对应关系写清楚。
经过以上过程,就可以完成父组件向子组件传输数据的过程了。

props基本用法

父组件向子组件传递数据;在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:

  1. 方式一:字符串数组,数组中的字符串就是传递时的名称。
  2. 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
<div id="app">
<!--    这里是参数间的关系-->
    <div id="describe">
        父组件向子组件传递数据,使用props指令;<br/>
        可以设置数组形式和对象形式;对象形式可以设置更多的内容。
    </div>
    <my-cpn :message="message_parent" :message_li="message_list"></my-cpn>

</div>
<template id="cpn">
    <div>
        <h4>cpn 组件中的内容</h4>
        <h4>{{message}}</h4>
        <h3>{{message_li}}</h3>
    </div>
</template>


<script src="../js/vue.js"></script>
<script>
    const cpn = Vue.extend({
        template: "#cpn",
        //这里是形式参数
/*        props:['message']   //数组形式*/
        props:{  //对象形式
            message:String,
            message_li: Array
        }
    })

    const app = new Vue({
        el: "#app",
        data:{
            // 这里是实际参数
            message_parent: "hello world!",
            message_list: ['hello','world']
        },
        components:{
            'my-cpn':cpn
        }
    })
</script>

验证数据类型

在编写父组件向子组件传输数据的时候;可以通过传输对象的方式,指定对象的类型。如果类型不正确,则会报错。
验证都支持哪些数据类型呢?

  1. String
  2. Number
  3. Boolean
  4. Array
  5. Object
  6. Date
  7. Function
  8. Symbol
  9. 验证也支持自定义的类型

2.2、子组件向父组件传输数据

在Vuejs 中子组件向父组件传输数据是通过自定义事件的方式实现的。

编写数据传输过程

1、父组件监听(v-on)某一个事件,并编写方法函数对此事件做出响应。
2、子组件监听到客户的操作后,在方法函数中触发($emit)事件,同时可以传输数据。
PS:v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。

<div id="app">
    <cpn @select="cpnClick"></cpn>
    <h3>{{currentIndex}}</h3>
</div>

<template id="cpn">
    <div>
        <button v-for="(item,index) in titles" @click="itemClick(index)">{{item}}</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = Vue.extend({
    template: "#cpn",
    methods:{
        itemClick(index){
            console.log(index)
            this.$emit('select',index)
        }
    },
    data(){
        return {
            titles:['新品','销量','特卖']
        }
    }
})
    const app = new Vue({
        el: "#app",
        data:{
            currentIndex: 0
        },
        components:{
            'cpn':cpn,
        },methods:{
            cpnClick(index){
                this.currentIndex = index
            }
        }
    })
</script>