vue中实现子组件接收父组件方法并获取返回值
目录
- 子组件接收父组件方法并获取返回值
- 父组件 GetCallback.vue
- 子组件 CallbackChild1.vue
- 子组件接收父组件的另一种方法
子组件接收父组件方法并获取返回值
项目中有时候会遇到父子组件传值的问题，比如子组件需要接收父组件方法并获取该方法返回值的时候。
使用this.$emit('方法名', '参数1', '参数2')的方式，获取到不是父组件方法的return值。但是我们可以将参数改为回调函数的形式，父组件里执行该回调函数，返回值后给子组件，子组件再接收返回值。
示例：
父组件 GetCallback.vue
<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>
子组件 CallbackChild1.vue
<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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
分享Vue子组件接收父组件传值的3种方式
目录 1.简单声明接收 2.接收数据的同时进行 类型限制 3.接收数据的同时对 数据类型.必要性.默认值 进行限制 父组件代码↓ <template> <div> <div>父组件</div> <Student :name="name" :age="age"></Student> </div> </template> <
-
vue子组件如何获取父组件的内容(props属性)
目录 子组件如何获取父组件的内容 props属性 vue父→子组件的props传值 需求1 需求2 子组件如何获取父组件的内容 props属性 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 想要引用父组件需要: <bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{ props:{ 'myMs
-
vue子组件如何使用父组件传过来的值
目录 子组件使用父组件传过来的值 父组件 子组件 vue子组件调用父组件数据 子组件使用父组件传过来的值 父组件 <alarmstatistics :roless.sync="role"></alarmstatistics> import alarmstatistics from "./alarmstatistics.vue"; components: { alarmstatistics, }, 子组件 props:
-
详解VUE里子组件如何获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件
-
vue中实现子组件接收父组件方法并获取返回值
目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示
-
android webview中使用Java调用JavaScript方法并获取返回值
在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC
-
Vue子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件
-
vue 组件间的通信之子组件向父组件传值的方式
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就
-
vue通过子组件修改父组件prop的多种实现方式
目录 前言 常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4.通过计算属性computed实现修改prop 前言 实际工作项目开发中,很经常会有父组件先传递值给子组件,再由子组件渲染展示的场景,下面我总结一下目前工作中遇到和用过的一些方式,也算是给大家一个实现方式和思路参考,如有理解不对or有其他方法欢迎在评论区留言指导- 常用方式 推荐,遵循prop单向传
-
Vue子组件向父组件传值示范方法
目录 一.要点概述 二.分步讲解 三.总代码和运行结果 一.要点概述 子组件:通过某种事件(这里是@click点击事件,也可以是其他事件)发送数据,this.$emit('事件名',要传的数据) 父组件:在标签内部@子组件中定义的事件名,等于一个函数(这里是rev),通过rev(val)这个函数接收数据,把val赋值给自己的数据 二.分步讲解 初始化Vue实例,可以理解为父组件,在父组件中的data中初始化一个变量(parentmsg),用来接收值: let vm = new Vue({ el:
-
vue 子组件向父组件传值方法
子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子
-
vue中如何让子组件修改父组件数据
一.关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1.常见的使用场景 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2.如果要一开始就执行 ... watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;
-
解决vue 子组件修改父组件传来的props值报错问题
vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&