访问子组件实例或子元素
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 特性为这个子组件赋予一个 ID 引用。
这上面时官网原话,我暂时知道是能在外部访问子组件中的内容,代码如下:
<body>
<div id="app">
<navbar ref="navbar"></navbar>
<pagefooter ref="pagefooter"></pagefooter>
</div>
<script>
Vue.component('navbar',{
template:'<h1>hello world</h1>',
data:function () {
return {
navs:[]
}
}
});
Vue.component('pagefooter',{
template:'<h1>how do you do</h1>',
data:function () {
return {
footer:'footer'
}
}
});
new Vue({
el:'#app',
mounted:function () {
//ready,
//这里怎么直接访问navbar的navs和pagefooter的footer值呢,
console.log(this.$refs.navbar.navs);
console.log(this.$refs.pagefooter.footer);
}
})
</script>
</body>
在父组件(我也不知道是不是叫做父组件)用ref=“组件名称”,然后就可以访问子组件中的内容了