Vue子組件向父組件傳值的方法是什么

發(fā)布時間：2023-03-20 13:55:52 來源：億速云閱讀：124 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了Vue子組件向父組件傳值的方法是什么的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue子組件向父組件傳值的方法是什么文章都會有所收獲，下面我們一起來看看吧。

一、要點概述

子組件：通過某種事件（這里是@click點擊事件，也可以是其他事件）發(fā)送數(shù)據(jù)，this.$emit('事件名',要傳的數(shù)據(jù))

父組件：在標簽內(nèi)部@子組件中定義的事件名，等于一個函數(shù)（這里是rev），通過rev（val）這個函數(shù)接收數(shù)據(jù)，把val賦值給自己的數(shù)據(jù)

二、分步講解

初始化Vue實例，可以理解為父組件，在父組件中的data中初始化一個變量（parentmsg），用來接收值；

let vm = new Vue({
    el: '#app',
    data: {
        parentmsg:''
    }
});

自定義子組件，命名為Child，這個名字可以隨意起，template里直接給一個id名，可以直接在html中寫組件的內(nèi)容，不再需要使用模板字符串寫模板了，既方便又快捷;

在子組件的data函數(shù)里聲明一個變量（childmsg）；

在子組件中寫一個點擊事件@click="send（）"，send函數(shù)內(nèi)部通過this.$emitthis.$emit（'childsend',this.childmsg）向父組件發(fā)送數(shù)據(jù)；this.$emit的第一個參數(shù)為事件名，自定義的，父組件需要通過這個事件名接收值；第二個參數(shù)為要傳給父組件的數(shù)據(jù)；

Vue.component('Child',{
    template:'#tp',
    data() {
        return {
            childmsg:'這是子組件中的數(shù)據(jù)'
        }
    },
    methods: {
        send() {
            // 第一個參數(shù)為事件名，自定義的，父組件需要通過這個事件名接收值
            // 第二個參數(shù)為要傳給父組件的數(shù)據(jù)
            this.$emit('childsend',this.childmsg)
        }
    }
})

<!-- 子組件模板內(nèi)容 -->
<template id="tp">
    <div>
        <button @click="send">點我向父組件傳值</button>
    </div>
</template>

在父組件中，通過@子組件中定義的事件名，觸發(fā)一個函數(shù)rev（val）來接收數(shù)據(jù)，把接收到的val值賦給自己的變量parentmsg，然后就可以在html中使用插值表達式或v-bind綁定屬性值來使用子組件發(fā)送的數(shù)據(jù)了。

<div id="app">
    <Child @childsend="rev"></Child>
    <h4>{{parentmsg}}</h4>
</div>
methods: {
    // 父組件接收數(shù)據(jù)的函數(shù)
    rev(val) {
        // val就是子組件發(fā)送的數(shù)據(jù)
        this.parentmsg = val
    }
}

三、總代碼和運行結(jié)果

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>子向父傳值</title>
</head>
<body>
     <!-- 父組件 @childsend="rev" -->
    <div id="app">
        <Child @childsend="rev"></Child>
        <h4>{{parentmsg}}</h4>
    </div>
    <!-- 子組件 this.$emit('childsend',this.childmsg) -->
    <template id="tp">
        <div>
            <button @click="send">點我向父組件傳值</button>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        // 自定義子組件
        Vue.component('Child',{
            template:'#tp',
            data() {
                return {
                    childmsg:'這是子組件中的數(shù)據(jù)'
                }
            },
            methods: {
                send() {
                    // 第一個參數(shù)為事件名，自定義的，父組件需要通過這個事件名接收值
                    // 第二個參數(shù)為要傳給父組件的數(shù)據(jù)
                    this.$emit('childsend',this.childmsg)
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                parentmsg:''
            },
            methods: {
                // 父組件接收數(shù)據(jù)的函數(shù)
                rev(val) {
                    // val就是子組件發(fā)送的數(shù)據(jù)
                    this.parentmsg = val
                }
            }
        });
    </script>
</body>
</html>

Vue子組件向父組件傳值的方法是什么

點擊之后父組件才能訪問子組件中的數(shù)據(jù)

Vue子組件向父組件傳值的方法是什么

關(guān)于“Vue子組件向父組件傳值的方法是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue子組件向父組件傳值的方法是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

Vue子組件向父組件傳值的方法是什么

一、要點概述

二、分步講解

三、總代碼和運行結(jié)果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

一、要點概述

二、分步講解

三、總代碼和運行結(jié)果