触发环境:在父组件中有一个按钮,点击该按钮后会去子组件中触发函数,执行函数。
1.定义父组件ref.vue,子组件refChild.vue;父组件中有一个按钮,import引入子组件并注册子组件,在使用子组件的头标签中写入ref="child",给按钮绑定一个点击事件clickHandel;在事件中写入this.$refs.child.show();注意:child单词要对应,触发child标识的组件的show()方法;可以传递参数过去。父组件ref.vue代码如下:
<template>
<div>
<el-button @click="clickHandel()">click me!</el-button>
<refChild ref="child"></refChild>
</div>
</template>
<script>
import refChild from "./refChild.vue";
export default {
data() {
return {
msg: "Hello World!",
};
},
methods: {
clickHandel() {
this.$refs.child.show(this.msg);
},
},
components: {
refChild,
},
};
</script>
<style lang="scss" scoped></style>
2.子组件中直接在methods中使用show方法,接收参数,进行操作,代码如下:
<template>
<div>
<div id="change">rachel</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
show(msg) {
var aDiv = document.getElementById("change");
aDiv.innerHTML = msg;
},
},
};
</script>
<style lang="scss" scoped></style>
3.可以实现在父组件中点击时,传递一个msg给子组件,并改变子组件的内容;
效果图: