vue 父级调用子级组件方法
贴上学习的源码~,若不懂可以百度自行理解父级<template><div class="home"><HelloWorld msg="hello" name="xiaopam" ref="myname" @fatherMethod="fatherMethodOther" :father="fatherMet" /><!--方法一--><game
·
贴上学习的源码~,若不懂可以百度自行理解
父级
<template>
<div class="home">
<HelloWorld msg="hello" name="xiaopam" ref="myname" @fatherMethod="fatherMethodOther" :father="fatherMet" />
<!-- 方法一-->
<game ref="mygame" @mygame_S="game_x1"></game>
<button @click="mygame_1">方法一</button>
<button @click="mygame_2">方法二</button>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
import game from '@/components/game'
export default {
data() {
return {
p_arrny: [1, 42,21,11,20,11,98,42,14]
}
},
components: {
HelloWorld,
game
},
mounted() {
var data = this.p_arrny;
var sum = data.indexOf(48);
data.splice(sum, 1);
data=[...new Set(data)];
data.sort(this.compart);
console.log(data);
},
methods: {
compart(x,y){
return x-y;
},
mygame_1() {
this.$refs.mygame.gameok()
},
mygame_2() {
this.game_x1();
},
game_x1(data) {
console.log(data)
},
gohome() {
console.log('我被子组件调用')
},
fatherMethodOther(str) {
console.log(str);
},
fatherMet(str) {
console.log(str);
}
}
}
</script>
子级
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>{{name}}</p>
<button @click="tohome_S">子组件</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
name: String,
father:{
type: Function,
default: null
}
},
methods: {
name_s() {
console.log('这是父级调用子组件的')
},
tohome_S(){
this.$parent.gohome();
this.$emit('fatherMethod', '这是emit');
this.father('这是prop');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)