Vue組件中的父子組件使用

更新時(shí)間：2023年01月22日 09:57:55 作者：小貓虎兒~

這篇文章主要介紹了Vue組件中的父子組件使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue組件中的父子組件

父組件向子組件傳值

父組件通過(guò)屬性綁定（v-bind:）的形式, 把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用
子組件需要在內(nèi)部定義 props 屬性。例如 props : [ ‘parentmsg’ ] 把父組件傳遞過(guò)來(lái)的 parentmsg 屬性，先在 props 數(shù)組中，定義一下，這樣，才能使用這個(gè)數(shù)據(jù)
所有 props 中的數(shù)據(jù)都是通過(guò)父組件傳遞過(guò)來(lái)的

示例1：

<div id="app" style="width: 800px;height: 100px;background: red;">
    <!-- 父組件，可以在引用子組件的時(shí)候， 通過(guò)屬性綁定(v-bind:)的形式,
    把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用-->
    <com1 v-bind:parentmsg="msg" style="width: 500px;height: 50px;background: green;"></com1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
        msg: '父組件中的數(shù)據(jù)'
    },
    components:{
        com1:{
            /*
                注意： 子組件中的 data 數(shù)據(jù)，并不是通過(guò) 父組件傳遞過(guò)來(lái)的，
                而是子組件自身私有的，比如： 子組件通過(guò) Ajax,請(qǐng)求回來(lái)的數(shù)據(jù)，都可以
                放到 data 身上；
                data 上的數(shù)據(jù)，都是可讀可寫的；
            */
            data(){
                return {
                title: '123',
                content: 'qqq'
            }
        },
            template: '<h1 @click="change">這是子組件：{{ parentmsg }}</h1>',
            /*
                注意： 組件中的 所有 props 中的數(shù)據(jù)，都是通過(guò) 父組件傳遞給子組件的
                把父組件傳遞過(guò)來(lái)的 parentmsg 屬性，先在 props 數(shù)組中定義一下，這樣
                才能使用這個(gè)數(shù)據(jù)
            */
            props: ['parentmsg'],
            methods:{
                change: function(){
                    this.parentmsg = '被修改了'
                }
            }
        }
    }
});
</script>

示例2：

<div id="app">
    <input type="text" v-model="item">
    <div style="width: 200px;height: 150px;background: red;">
        <test :tt="item"></test>
    </div>
</div>
<template id="temp">
    <div>
        <p v-text="tt"></p>
    </div>
</template>
<script>
    Vue.component("test",{
        props:['tt'],
        template:'#temp'
    })
    new Vue({
        el:'#app',
        data:{
            item:'ABCD'
        }
    });
</script>

子組件向父組件傳值

子組件向父組件傳值是通過(guò)方法的方式

示例：

<div id="app" style="width: 500px;height: 300px;background: red;">
    <!-- 父組件向子組件傳遞方法使用的是事件綁定機(jī)制；v-on,當(dāng)我們自定義了 一個(gè)
    事件屬性之后那么，子組件就能夠，通過(guò)某些方式，來(lái)調(diào)用傳遞進(jìn)去的這個(gè)方法了 -->
    <com2 @func="show"></com2>
    <p>{{ datamsgFormSon }}</p>
</div>
<template id="tmpl">
    <div style="width: 300px;height: 200px;background: green;">
        <h1>這是子組件</h1>
        <input type="button" value="是子組件中的按鈕" @click="myclick">
    </div>
</template>
<script>
    // 定義了一個(gè)字面量類型的組件模板對(duì)象
    var com2 = {
        template: '#tmpl', // 通過(guò)指定了一個(gè) Id, 表示說(shuō)，要去加載這個(gè)指定 Id 的template 元素中的內(nèi)容，當(dāng)作組件的 HTML 結(jié)構(gòu)
        data() {
            return {
                sonmsg: {
                    name: '大頭兒子',
                    age: 6
                }
            }
        },
        methods: {
            myclick() {
                // 當(dāng)點(diǎn)擊子組件的按鈕的時(shí)候，通過(guò)$emit 拿到父組件傳遞過(guò)來(lái)的 func 方法
                // emit 英文原意： 是觸發(fā)，調(diào)用、發(fā)射的意思
                this.$emit('func', this.sonmsg)
            }
        }
    }
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            datamsgFormSon: null
        },
        methods: {
            show(data) {
                console.log('調(diào)用了父組件身上的 show 方法: --- ' + data)
                console.log(data.name);
                this.datamsgFormSon = data
            }
        },
        components: {
            com2
            //com2: com2
         }
    });
</script>