- 父組件向子組件傳值
- 子組件中针肥，默認無法訪問到父組件中的data上的數(shù)據(jù)和methods中的方法
- 父組件可以在引用子組件的時候，通過屬性綁定 (v-bind:)的形式束倍，把需要傳遞給子組件的數(shù)據(jù)蔚晨，以屬性綁定的形式，傳遞到子組件內(nèi)部供子組件使用
- 把父組件傳遞過來的parentmsg屬性咖杂，先在props數(shù)組中庆寺，定義一下，這樣才能在子組件中使用這個數(shù)據(jù)
- 組件中的所有Props中的數(shù)據(jù)诉字，都是通過父組件傳遞給子組件的
- 子組件中的data數(shù)據(jù)懦尝，不是通過父組件中傳遞過來的，而是子組件自身私有的壤圃，比如子組件通過Api接口請求回來的數(shù)據(jù)陵霉，都可以放到data身上
- 子組件中的data數(shù)據(jù)是可讀可寫的，而props中的數(shù)據(jù)是只讀的伍绳。（可以修改踊挠，但是不推薦修改）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父組件向子組件傳值</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <!-- 注意這里的變量名稱parentmsg大小寫不區(qū)分，props里統(tǒng)一使用小寫 --> <mycom1 v-bind:parentmsg="msg"></mycom1> </div> <template id="com1"> <div> <h3> 我是子組件 </h3> <h2>從父組件獲取到的數(shù)據(jù) {{ parentmsg }}</h2> <h2>從子組件獲取到的數(shù)據(jù) {{ name }} : {{ childmsg }}</h2> </div> </template> <script> var vm = new Vue({ el: '#app', data: { msg: '我是父組件的數(shù)據(jù)' }, components: { mycom1: { template: '#com1', data: function(){ return { name: "zhangsan", childmsg: "nihao" } }, props: ['parentmsg'] //子組件模板中引用的從父組件里獲取的變量，必須在props數(shù)組中定義變量名稱 } } }) </script> </body> </html> - 父組件把方法傳遞給子組件
- 父組件向子組件傳遞方法效床，使用的是事件綁定機制：v-on:或者@睹酌。當我們自定義了一個事件屬性之后，子組件就能夠通過某些方式來調(diào)用傳遞進去的這個方法了
- 當點擊子組件的按鈕的時候剩檀，如何拿到父組件傳遞過來的func方法憋沿，并調(diào)用這個方法？使用this.$emit('func')沪猴。如果有參數(shù)辐啄，直接拼接在觸發(fā)方法后，如：this.$emit('func', arg1, arg2...)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父組件向子組件傳值</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <mycom1 v-on:childshow="show"></mycom1> </div> <template id="com1"> <div> <input type="button" value="調(diào)用父組件的方法" @click="myclick"> </div> </template> <script> var vm = new Vue({ el: '#app', data: { msg: '我是父組件的數(shù)據(jù)' }, methods:{ show(){ console.log("我是父組件中的方法") } }, components: { mycom1: { template: '#com1', methods:{ myclick(){ this.$emit('childshow') } } } } }) </script> </body> </html> - 使用ref獲取DOM元素和組件的引用
- ref 是英文單詞refrence的縮寫
- 在元素上添加ref屬性运嗜， 譬如：ref="myh3"
- 在VM中使用DOM：this.$refs.myh3.innerText
- 同樣也可以將ref屬性放到component組件元素上壶辜，這樣就可以直接調(diào)用組件的方法和屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用refer獲取dom</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="button" value="點擊獲取文本" @click="show_log"> <h3 ref="myh3">我是一個普通文本</h3> </div> <script> var vm = new Vue({ el :"#app", methods:{ show_log(){ console.log(this.$refs.myh3.innerText) } } }) </script> </body> </html>
vue筆記-16（組件-父子組件數(shù)據(jù)和方法傳遞）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門承璃，熙熙樓的掌柜王于貴愁眉苦臉地迎上來利耍，“玉大人，你說我怎么就攤上這事盔粹“妫” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵舷嗡，是天一觀的道長轴猎。 經(jīng)常有香客問我，道長进萄，這世上最難降的妖魔是什么捻脖？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮中鼠，結(jié)果婚禮上可婶，老公的妹妹穿的比我還像新娘。我一直安慰自己援雇，他們只是感情好矛渴，可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惫搏，像睡著了一般具温。 火紅的嫁衣襯著肌膚如雪蚕涤。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼失仁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了们何？” 一聲冷哼從身側(cè)響起萄焦，我...
- 正文 年R本政府宣布屹徘，位于F島的核電站走趋，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏缘回。R本人自食惡果不足惜吆视，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望酥宴。 院中可真熱鬧啦吧，春花似錦、人聲如沸拙寡。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至般堆，卻和暖如春在孝，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背淮摔。 一陣腳步聲響...
