注释很详细,直接上代码
新增内容
- 使用ref标记元素或组件
- 通过$refs获取元素或组件实例
源码
App.vue
<template>
<div id="app">
<!-- ref相当于为子组件或者元素绑定一个ref属性,
然后通过this.$refs属性获取到对应的元素或者组件
可用于打印元素或者组件的信息或者调用子组件中的方法-->
<h1 ref="h1">ref用法演示</h1>
<TestComponent ref="testComponent" />
<button @click="OnTap">点击输出</button>
</div>
</template>
<script>
import TestComponent from "./components/TestComponent.vue";
export default {
name: "App",
components: {
TestComponent
},
data() {
return {
};
},
methods: {
OnTap(){
//此处打印出h1元素信息
console.log(this.$refs.h1);
//此处调用TestComponent组件中的方法
this.$refs.testComponent.test();
}
}
};
</script>
<style></style>
TestComponent.vue
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
test() {
console.log('我是Test组件中的方法!!!');
}
}
}
</script>
<style lang="less" scoped>
</style>
效果演示