Vue子组件给父组件传值的四种方法

分类：教程日期：2021-07-10

Vue 父组件给子组件传值后，子组件不能直接修改该值，否则无法与父组件保持一致。正确的做法是告知父组件，让父组件修改该值，然后父组件自动同步给子组件。

子组件给父组件传值有以下四种方法（基于 Vue 2.x）：

1、自定义事件（查看演示）
2、@update（查看演示）
3、.sync（推荐）（查看演示）
4、$parent（查看演示）

1、自定义事件

父组件：

<div id="app">
    <div>父组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}</div>

    <child
        :name="name"
        :age="age"
        @update_name="updateNameFromChild"
        @update_age="updateAgeFromChild"
    ></child>
</div>

<script src="vue.min.js"></script>
<script src="child-one.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Tom',
            age: 23
        },
        methods: {
            updateNameFromChild(val) {
                this.name = val
            },
            updateAgeFromChild(val) {
                this.age = val
            }
        }
    })
</script>

子组件：

var child = Vue.component('child', {
    template: `<p @click="update">子组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}<span>（点击我）</span></p>`,
    props: ['name', 'age'],
    methods: {
        update() {
            this.$emit('update_name', 'Lili')
            this.$emit('update_age', 19)
        }
    }
})

2、@update

父组件：

<div id="app">
    <div>父组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}</div>

    <child
        :name="name"
        :age="age"
        @update:name="val => name = val"
        @update:age="val => age = val"
    ></child>
</div>

<script src="vue.min.js"></script>
<script src="child-two.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Tom',
            age: 23
        }
    })
</script>

子组件：

var child = Vue.component('child', {
    template: `<p @click="update">子组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}<span>（点击我）</span></p>`,
    props: ['name', 'age'],
    methods: {
        update() {
            this.$emit('update:name', 'Lili')
            this.$emit('update:age', 19)
        }
    }
})

3、.sync（推荐）

父组件：

<div id="app">
    <div>父组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}</div>

    <child :name="name" :age="age" :name.sync="name" :age.sync="age"></child>
</div>

<script src="vue.min.js"></script>
<script src="child-three.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Tom',
            age: 23
        }
    })
</script>

子组件：

var child = Vue.component('child', {
    template: `<p @click="update">子组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}<span>（点击我）</span></p>`,
    props: ['name', 'age'],
    methods: {
        update() {
            this.$emit('update:name', 'Lili')
            this.$emit('update:age', 19)
        }
    }
})

4、$parent

父组件：

<div id="app">
    <div>父组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}</div>

    <child :name="name" :age="age"></child>
</div>

<script src="vue.min.js"></script>
<script src="child-four.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Tom',
            age: 23
        }
    })
</script>

子组件：

var child = Vue.component('child', {
    template: `<p @click="update">子组件的内容：我叫 {{ name }}，我的年龄是 {{ age }}<span>（点击我）</span></p>`,
    props: ['name', 'age'],
    methods: {
        update() {
            this.$parent.name = 'Lili'
            this.$parent.age = 19
        }
    }
})

标签：Vue.js

相关内容