vue -- ref
2018-08-16 本文已影响0人
杯莫停_5273
访问子组件实例或子元素
尽管存在 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>
