Vue.js Parent Call Child Component Method
Vue.js Parent Call Child Component Method
- 单个定义的 ref ,使用
this.$refs
.xxx 获取的是 一个组件的实例对象 - 通过 v-for 循环后多个定义的 ref,使用
this.$refs
.xxx 获取的是 一个组件的实例对象的数组
methods: {
clickRef(index) {
const ref = `ref_${index}`;
console.log("ref =", ref);
console.log("this.$refs =", this.$refs);
this.$refs[ref].log();
/*
ref = ref_1
this.$refs =
{ref_1: VueComponent, ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref order =
1
*/
},
clickTab(tab) {
console.log("click tab =", tab);
//
const ref = `ks_ref_${tab}`;
console.log("ref =", ref);
console.log("this.$refs =", this.$refs);
console.log("this.$refs[ref] =", this.$refs[ref]);
console.log("this.$refs[`ks_ref_${tab}`] =", this.$refs[`ks_ref_${tab}`]);
this.$refs[ref].log();
// this.$refs[`ks_ref_${tab}`].log();
/*
click tab =
0
this.$refs =
{ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref = ks_ref_0
this.$refs[ref] =
(1) [VueComponent]
this.$refs[`ks_ref_${tab}`] =
(1) [VueComponent]
[Vue warn]: Error in v-on handler: "TypeError: this.$refs[ref].log is not a function"
TypeError: this.$refs[ref].log is not a function
*/
},
},
refs ??? object
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<section class="tab-box">
<div class="tab">
<button @click="clickRef(index)">ref {{ index }}</button>
<Child :ref="`ref_${index}`" :order="index" />
</div>
</section>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "HelloWorld",
components: {
Child,
},
props: {
msg: String,
},
data() {
return {
index: 1,
list: ["a", "b", "c"],
};
},
methods: {
clickRef(index) {
const ref = `ref_${index}`;
console.log("ref =", ref);
console.log("this.$refs =", this.$refs);
this.$refs[ref].log();
/*
ref = ref_1
this.$refs =
{ref_1: VueComponent, ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref order =
1
*/
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
.tab-box {
width: 700px;
height: 120px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.tab {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
background: #ccc;
margin: 0 10px;
}
</style>
refs ??? array
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<section class="tab-box">
<div class="tab" v-for="(key, i) in list" :key="key">
<button @click="clickTab(i)">button {{ i }}</button>
<Child :ref="`ks_ref_${i}`" :order="i" />
</div>
</section>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "HelloWorld",
components: {
Child,
},
props: {
msg: String,
},
data() {
return {
list: ["a", "b", "c"],
};
},
methods: {
clickTab(tab) {
console.log("click tab =", tab);
//
const ref = `ks_ref_${tab}`;
console.log("ref =", ref);
console.log("this.$refs =", this.$refs);
console.log("this.$refs[ref] =", this.$refs[ref]);
console.log("this.$refs[`ks_ref_${tab}`] =", this.$refs[`ks_ref_${tab}`]);
this.$refs[ref].log();
// this.$refs[`ks_ref_${tab}`].log();
/*
click tab =
0
this.$refs =
{ks_ref_0: Array(1), ks_ref_1: Array(1), ks_ref_2: Array(1)}
ref = ks_ref_0
this.$refs[ref] =
(1) [VueComponent]
this.$refs[`ks_ref_${tab}`] =
(1) [VueComponent]
[Vue warn]: Error in v-on handler: "TypeError: this.$refs[ref].log is not a function"
TypeError: this.$refs[ref].log is not a function
*/
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
.tab-box {
width: 700px;
height: 120px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.tab {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
background: #ccc;
margin: 0 10px;
}
</style>
<template>
<div class="child">
<h2>tab order = {{ order }}</h2>
</div>
</template>
<script>
export default {
name: "Child",
props: {
order: {
type: Number,
defualt: NaN,
},
},
methods: {
log() {
console.log("ref order =", this.order);
// typeof NaN;
// "number"
},
},
};
</script>
<style scoped>
.child {
color: #0f0;
}
</style>
Vue refs All In One
demo
https://codesandbox.io/s/vue-refs-all-in-one-if1r6
refs
https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。