大家好，欢迎来到IT知识分享网。
1.Props传
通过Pros将父亲的methods方法传给子，子用 click来接收这个方法。
A（父）
<template>
<div>
<B :cutPrice="cutPrice"></B>
</div>
</template>
<script>
import B from "./B.vue";
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
cutPrice(name){
console.log(name);
}
},
components: {B},
};
</script>
<style>
</style>
B（子）
<template>
<div>
<button @click="cutPrice(1)"></button>
</div>
</template>
<script>
export default {
props:["cutPrice"],
data() {
return {
}
},
activated() {
},
watch: {
},
created(){
},
mounted(){
},
methods:{
}
}
</script>
<style>
</style>
2.官方$emit
A(父) 自定义一个事件，在子中去触发
<template>
<div>
<B @updatePrice="cutPrice"></B>
</div>
</template>
<script>
import B from "./B.vue";
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
cutPrice(name) {
console.log(name);
},
},
components: { B },
};
</script>
<style>
</style>
子（B）
<template>
<div>
<button @click="xx">123</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
xx(){
this.$emit("updatePrice",11)
}
},
};
</script>
<style>
</style>
3.通过在子$parent调用父亲A中的属性
A（父亲）
<template>
<div>
<B></B>
</div>
</template>
<script>
import B from "./B.vue";
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
cutPrice(name) {
console.log(name);
},
},
components: { B },
};
</script>
<style>
</style>
B（子）
<template>
<div>
<button @click="xx">123</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
xx(){
// this.$emit("updatePrice",11)
// console.log(this.$parent);
this.$parent.cutPrice(22)
}
},
};
</script>
<style>
</style>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29689.html
