下午写 Vue $parent 实例时，总是遇到这个问题，不禁让人陷入沉思
1.gif
Vue，醒醒啊，你怎么了，贴上子组件源代码
<template>
<div>
<child-component1></child-component1>
<child-component2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</div></template><script>export default{ components: { 'child-component1': { template: '#child-component1', data: function () { return { msg: 'child component 111111'
}
}
}, 'child-component2': { template: '#child-component2', data: function () { return { msg: 'child component 222222'
}
}
}
}, methods: { showChildComponentData: function () { for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
}</script>这是报错信息：
1.png
修改后的代码：
<template>
<div>
<child-component1></child-component1>
<child-component2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</div></template><script>export default{ components: { 'child-component1': { template: '<p>I am ok</p>', data: function () { return { msg: 'child component 111111'
}
}
}, 'child-component2': { template: '<p>ok</p>', data: function () { return { msg: 'child component 222222'
}
}
}
}, methods: { showChildComponentData: function () { for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
}</script>这样就好了，原因是 Vue 的构建，运行时构建删除了模板编译的功能，因此无法支持带 template 属性的 Vue 实例选项。
作者：H_婷
链接：https://www.jianshu.com/p/ecc97f18286c
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦