vue子組件如何獲取父組件的內(nèi)容(props屬性)

更新時(shí)間：2022年04月20日 11:09:22 作者：Queen_zdd

這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

子組件如何獲取父組件的內(nèi)容

props屬性

組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)?？梢允褂?props 把數(shù)據(jù)傳給子組件。

想要引用父組件需要：

<bbb v-bind:myMsg="msg"></bbb>//子組件將父組件的數(shù)據(jù)msg綁定到myMsg上
bbb:{
? ? props：{
? ? ? ? 'myMsg':String ?//綁定數(shù)據(jù)的類型
? ? }
}

注：props也可表達(dá)成如下：props：['myMsg']

完整實(shí)例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="example">
    <aaa></aaa>
</div>
<template id="aaa">
    <h1>{{msg}}</h1>       //父組件
    <bbb :my-msg="msg"></bbb> //子組件
</template>
<script>
    window.onload=function(){
        new Vue({
            el: '#example',
                 data:{
                     },
            components:{
                aaa:{
                    data:function(){
                        return{
                            msg:'我是父組件的數(shù)據(jù)'
                        }
                     },
                    template:'#aaa',
                    components:{
                        bbb:{
                            props:{
                                'myMsg':String
                            },
                            template:'<h2>我是子組件-->{{myMsg}}</h2>'
                        }//當(dāng)html中使用my-msg時(shí)，在js中需使用駝峰命名myMsg
                    }
                }
            }
    })
    }
</script>
</body>
</html>

最后的結(jié)果如下圖：

vue父→子組件的props傳值

需求1

如果要將自定義屬性里的值傳遞給模板,可以使用props屬性:

寫法注意的地方:

1.props的大小寫:對(duì)于html里的短橫線命名,在vue里面要用小駝峰命名法(大駝峰命名介紹:第一個(gè)字母也是大寫);

2.template里必須有一個(gè)根目錄:

需求2

實(shí)際項(xiàng)目中我們經(jīng)常要將data里面的值傳遞給模板,操作如下:

思路:使用v-bind和data數(shù)據(jù)綁定,將值傳遞到組件的模板里的插值里.

另一個(gè)案例:

效果圖:

傳遞的過(guò)程總結(jié):準(zhǔn)備一個(gè)大的組件(在vue實(shí)例里)和一個(gè)子組件son,在son子組件里使用v-bind綁定要傳遞的message屬性,message屬性值是對(duì)應(yīng)父組件里的data值,然后在son子組件component方法的第二個(gè)參數(shù)的對(duì)象里增加一個(gè)props屬性(重點(diǎn)是這個(gè)props屬性,它是用來(lái)接收父組件的值的),值是數(shù)組,里面就填字符串形式的message,最后直接在子組件的模板里用插值的方式使用這個(gè)message就可以了.

同時(shí),也要了解子組件同步修改父子組件的值,操作如下:

子組件修改父子組件值的操作過(guò)程:

在子組件里定義一個(gè)修改的方法,在方法里添加this.$emit()方法,它有兩個(gè)參數(shù),第一個(gè)是自定義事件名,第二個(gè)是要修改的值,接著在父組件里用v-on添加這個(gè)自定義事件,值寫父組件方法,在這個(gè)方法里用(美元event)作為參數(shù),在父組件方法里接收并操作自己要修改的邏輯操作即可.

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: