Vue之componet之$ref
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title>componet-children</title>
</head>
<body>
<div id="app">
<child ref="a"></child>
<child ref="b"></child>
<child></child>
<button @click="showchild">click me</button>
</div>
<!--child template-->
<template id="child">
<div>
<h1>I am child</h1>
<h1>{{childmessge}}</h1>
</div>
</template>
<script>
//childe componet
let child = Vue.component('child', {
template: "#child",
data() {
return {
childmessge: "I am from child",
name: "xiao li"
}
},
methods: {
show() {
alert("I come")
}
}
})
//root
new Vue({
el: "#app",
methods: {
showchild() {
console.log(this.$refs.a);//查看$ref="a"的DOM元素
console.log(this.$refs.a.name);//查看$ref="a"的DOM元素的数据项
this.$refs.a.show();//访问子组件方法
}
},
components: {
child
}
})
</script>
</body>
</html>
运行效果：
总结
1.尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用
2.$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
扫一扫
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
