以后會(huì)不定期的更新(準(zhǔn)備考研Ing,個(gè)人博客只能算是業(yè)余的工作了)
之前很早就預(yù)備用vue構(gòu)建了假褪,官方的文檔也看了很久但是涩金,真的做的時(shí)候跟文檔就是兩碼事控硼。
進(jìn)入正題枷颊,這次主要是node構(gòu)建的vue應(yīng)用的組件傳參問題戳杀。
在自己用CDN測(cè)試的文檔里是這樣寫的
<div id="app">
<my_menu v-bind:subtitles="my_subtitles"></my_menu>
</div>
<script>
new Vue({
el:'#app',
data:{
my_subtitles:[
{content:"aaa",link:"http://www.baidu.com"}
]
}
})
</script>
內(nèi)容非常的清晰,但是在vue應(yīng)用中夭苗,只能看到
<div id="app" ></div>
new Vue(render: h => h(App))
???道理都懂信卡,id為app的<div>被替換成了App組件,但是問題是原本的參數(shù)怎么綁定题造。這里先看h=>h(App)是怎么回事
這其實(shí)是用了箭頭函數(shù)縮寫(個(gè)人不喜歡縮寫坐求,帶來的問題確實(shí)多,寫的時(shí)候的確麻煩晌梨,但是有可讀性的保障)桥嗤,上面的原型是這樣的:
render: function (createElement) {
return createElement(App);
}
而要將信息綁定到App實(shí)例中的方法為
render:(h) => {
return h('div',{ //給div綁定value屬性
props: {
value:''
},
//給div綁定樣式
style:{
width:'30px'
},
//給div綁定點(diǎn)擊事件
on: {
click: () => {
console.log('點(diǎn)擊事件')
}
},
})
}