文章目录
一 访问元素&组件
1.1 访问根实例
在之前的组件学习中,我们知道自定义组件是没办法访问到VUE
实例里的东西的,这是为什么呢?这是因为新建vue
实例的时候有匹配一个id,而vue
实例里的data
、computed
、components
等就是在这个id对应的组件里的。
因此自定义组件作为子组件是没办法用到的。而要使用也很简单:
Vue.component('test',{
template:`
<div>{
{this.$root.hello}}</div>
`
})
new Vue({
el: '#app',
data:{
hello:"你好哇 李银河"
},
components: {
touch_root:{
template:`
<div>{
{this.$root.hello}}</div>
`
}
}
})
全局注册和局部注册都一样:
<div id="app">
<test></test>
<touch_root></touch_root>
</div>
1.2 访问父级组件实例
VUE实例解释
父级组件实例
自定义组件parent
和show_data
:parent
组件就是show_data
组件的父组件。div
是根实例
<div id="root">
<parent>
<show_data></show_data>
</parent>
</div>
根节点: