Vue 父子件数据传递

  • 概述

    假设需要父组件传递数据至子组件，且子组件数据修改时需将父组件的数据同步修改，有如下两种修改方式。

    • 通过自定义v-model方式实现
    1. 将父组件数据通过props传入至子组件；
    2. 子组件内创建变量复制props数据；
    3. 通过v-bind将子组件的变量绑定至子组件的value上；
    4. 绑定@input时间函数
      a. 将输入框的数据幅值至子组件数据上；
      b. 通过$emit()函数给父组件发送事件；
    5. 父组件监听子组件触发的事件，并获取数据幅值至父组件数据。
    • 通过v-model方法配合watch方式实现
    1. 将父组件数据通过props传入至子组件；
    2. 子组件内创建变量复制props数据；
    3. 通过v-model将子组件的变量双向绑定至输入框；
    4. 通过watch方法监听子组件数据
      a. 通过$emit()函数给父组件发送事件；
    5. 父组件监听子组件触发的事件，并获取数据幅值至父组件数据。

  • 自定义v-model方法

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue父子件数据传递(自定义v-model方式)</title>
</head>
<body>
<div id="app">
    <cmp1
        :father_val1="val1"
        :father_val2="val2"
        @change_val1="change_val1"
        @change_val2="change_val2"
    ></cmp1>
    <h2>father_val1: {{ val1 }}</h2>
    <h2>father_val2: {{ val2 }}</h2>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('cmp1',{
        template:`
            <div>
                <input type="text" :value="child_val1" @input="change_val1">
                <input type="text" :value="child_val2" @input="change_val2">
                <h2>child_val1: {{child_val1}}</h2>
                <h2>child_val2: {{child_val2}}</h2>
            </div>
        `,
        data(){
            return {
                child_val1: this.father_val1,
                child_val2: this.father_val2
            }
        },
        props:{
            father_val1: '',
            father_val2: ''
        },
        methods:{
            change_val1(event){
                this.child_val1 = event.target.value
                this.$emit('change_val1', this.child_val1)
            },
            change_val2(event){
                this.child_val2 = event.target.value
                this.$emit('change_val2', this.child_val2)
            }
        }
    })
    let app = new Vue({
        data:{
            val1: 'val1',
            val2: 'val2',
        },
        methods: {
            change_val1(val){
                this.val1 = val
            },
            change_val2(val){
                this.val2 = val
            }
        }
    }).$mount('#app')
</script>
</body>
</html>

  • v-model配合watch方法

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue父子件数据传递(v-model配合watch方式)</title>
</head>
<body>
<div id="app">
    <cmp1
        :father_val1="val1"
        :father_val2="val2"
        @change_val1="change_val1"
        @change_val2="change_val2"
    ></cmp1>
    <h2>father_val1: {{ val1 }}</h2>
    <h2>father_val2: {{ val2 }}</h2>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('cmp1',{
        template:`
            <div>
                <input type="text" value="child_val1" v-model="child_val1">
                <input type="text" value="child_val2" v-model="child_val2">
                <h2>child_val1: {{child_val1}}</h2>
                <h2>child_val2: {{child_val2}}</h2>
            </div>
        `,
        data(){
            return {
                child_val1: this.father_val1,
                child_val2: this.father_val2
            }
        },
        props:{
            father_val1: '',
            father_val2: ''
        },
        watch:{
            child_val1(newVal){
                this.$emit('change_val1', this.child_val1)
            },
            child_val2(newVal){
                this.$emit('change_val2', this.child_val2)
            }
        }
    })
    let app = new Vue({
        data:{
            val1: 'val1',
            val2: 'val2',
        },
        methods: {
            change_val1(val){
                this.val1 = val
            },
            change_val2(val){
                this.val2 = val
            }
        }
    }).$mount('#app')
</script>
</body>
</html>