目录子组件接收父组件方法并获取返回值父组件 GetCallback.Vue子组件 CallbackChild1.vue子组件接收父组件的另一种方法子组件接收父组件方法并获取返回值 项
项目中有时候会遇到父子组件传值的问题，比如子组件需要接收父组件方法并获取该方法返回值的时候。
使用this.$emit('方法名', '参数1', '参数2')的方式，获取到不是父组件方法的return值。但是我们可以将参数改为回调函数的形式，父组件里执行该回调函数，返回值后给子组件，子组件再接收返回值。
示例：
<template>
<div>
我是父组件
<CallbackChild1 @getData="getData" />
</div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import CallbackChild1 from '@/components/CallbackChild1.vue';
@Component({
components: {
CallbackChild1,
},
})
export default class GetCallback extends Vue {
getData(callback: FunctionConstructor): void {
const name = '我是父组件的值';
callback(name); // 父组件执行作为参数的函数
}
}
</script><template>
<div>
<p>我是子组件</p>
<button @click="getDataFromParent">子组件获取父组件返回值</button>
<span>返回值：{{ value }}</span>
</div>
</template><script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class CallbackChild1 extends Vue {
value = '';
getDataFromParent(): string {
// 子组件接收函数的值
this.$emit('getData', (val: string) => { this.value = val });
return this.value;
}
}
</script>子组件获取父组件传递的数据通常是通过props属性接收父组件的传递过来的数据，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta Http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-child :msg='msg'></my-child>
</div>
</body>
</html>
<script src="./node_modules//vue//dist//vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'helloWord'
},
components: {
'myChild': {
props: ['msg'],
mounted() {
console.log(this.$attrs)
},
components: {
'myChildren': {
props: ['msg'],
template:
`<span>{{msg}}</span>
`
}
},
template: `<div>{{msg}}
<my-children :msg='msg'></children>
</div>`
}
}
})
</script>也可以通过子组件的$attrs接收的父组件的数据，但是这时候传递的数据子组件中不能有props的属性，不然子组件的$attrs获得的是空对象，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-child :msg='msg'></my-child>
</div>
</body>
</html>
<script src="./node_modules//vue//dist//vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'helloword'
},
components: {
'myChild': {
// props:['msg'],
mounted() {
console.log(this.$attrs)
},
components: {
'myChildren': {
//props:['msg'],
template:
`<span>{{this.$attrs.msg}}</span>
`
}
},
template: `<div>{{this.$attrs.msg}}
<my-children :msg='$attrs.msg'></children>
</div>`
}
}
})
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue中实现子组件接收父组件方法并获取返回值
本文链接: https://lsjlt.com/news/171720.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0