Vue.js Parent Call Child Component Method_vue.js

Vue.js Parent Call Child Component Method



Vue.js Parent Call Child Component Method


  1. 单个定义的 ref ,使用 ​​this.$refs​​.xxx 获取的是 一个组件的实例对象
  2. 通过 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

Vue.js Parent Call Child Component Method_ref_02


<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

Vue.js Parent Call Child Component Method_vue.js

<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/​