溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“vue子組件怎么獲取父組件的內(nèi)容”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)?？梢允褂?props 把數(shù)據(jù)傳給子組件。
想要引用父組件需要：
<bbb v-bind:myMsg="msg"></bbb>//子組件將父組件的數(shù)據(jù)msg綁定到myMsg上
bbb:{
props：{
'myMsg':String //綁定數(shù)據(jù)的類型
}
}注：props也可表達成如下：props：['myMsg']
完整實例如下：
<!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">
<h2>{{msg}}</h2> //父組件
<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:'<h3>我是子組件-->{{myMsg}}</h3>'
}//當html中使用my-msg時，在js中需使用駝峰命名myMsg
}
}
}
})
}
</script>
</body>
</html>最后的結果如下圖：
如果要將自定義屬性里的值傳遞給模板,可以使用props屬性:
寫法注意的地方:
1.props的大小寫:對于html里的短橫線命名,在vue里面要用小駝峰命名法(大駝峰命名介紹:第一個字母也是大寫);
2.template里必須有一個根目錄:
實際項目中我們經(jīng)常要將data里面的值傳遞給模板,操作如下:
思路:使用v-bind和data數(shù)據(jù)綁定,將值傳遞到組件的模板里的插值里.
另一個案例:
效果圖:
傳遞的過程總結:準備一個大的組件(在vue實例里)和一個子組件son,在son子組件里使用v-bind綁定要傳遞的message屬性,message屬性值是對應父組件里的data值,然后在son子組件component方法的第二個參數(shù)的對象里增加一個props屬性(重點是這個props屬性,它是用來接收父組件的值的),值是數(shù)組,里面就填字符串形式的message,最后直接在子組件的模板里用插值的方式使用這個message就可以了.
同時,也要了解子組件同步修改父子組件的值,操作如下:
子組件修改父子組件值的操作過程:
在子組件里定義一個修改的方法,在方法里添加this.$emit()方法,它有兩個參數(shù),第一個是自定義事件名,第二個是要修改的值,接著在父組件里用v-on添加這個自定義事件,值寫父組件方法,在這個方法里用(美元event)作為參數(shù),在父組件方法里接收并操作自己要修改的邏輯操作即可.
“vue子組件怎么獲取父組件的內(nèi)容”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
