Vue.js $refs用法案例详解
短信预约 -IT技能 免费直播动态提醒
尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。
ref 为子组件指定一个引用 ID，使父组件能通过 ref 直接访问子组件中的数据
通过 this.$refs.outsideComponentRef 能直接定位到 ref=“outsideComponentRef” 的上，并返回该实例化对象
一、ref使用在外面的组件上
<div id="app">
<component-father ref="outsideComponentRef"></component-father>
</div>
<script>
var refoutsidecomponentTem = {
template: "<div class='childComp'><h5>{{test}}</h5></div>",
data(){
return{
test:'我是子组件'
}
}
};
new Vue({
el: "#app",
components: {
"component-father": refoutsidecomponentTem
},
mounted:function () {
console.log(this); // #app vue实例
console.log(this.$refs.outsideComponentRef); // VueComponent vue实例
console.log(this.$refs.outsideComponentRef.test); // '我是子组件'
}
});
</script>二、ref使用在外面的元素上
<div id="app">
<component-father></component-father>
<p ref="outsideComponentRef">p标签</p>
</div>
<script>
var refoutsidecomponentTem = {
template: "<div class='childComp'><h5>{{test}}</h5></div>",
data(){
return{
test:'我是子组件'
}
}
};
new Vue({
el: "#app",
components: {
"component-father": refoutsidecomponentTem
},
mounted:function () {
console.log(this.$refs.outsideComponentRef); // 返回 “<p>p标签</p>”对象
}
});
</script>
到此这篇关于Vue.js $refs用法案例详解的文章就介绍到这了,更多相关Vue.js $refs用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
