Vue子组件向父组件传值示范方法

目录
  • 一、要点概述
  • 二、分步讲解
  • 三、总代码和运行结果

一、要点概述

子组件：通过某种事件（这里是@click点击事件，也可以是其他事件）发送数据，this.$emit('事件名',要传的数据)

父组件：在标签内部@子组件中定义的事件名，等于一个函数（这里是rev），通过rev（val）这个函数接收数据，把val赋值给自己的数据

二、分步讲解

初始化Vue实例，可以理解为父组件，在父组件中的data中初始化一个变量（parentmsg），用来接收值；

let vm = new Vue({
    el: '#app',
    data: {
        parentmsg:''
    }
});

自定义子组件，命名为Child，这个名字可以随意起，template里直接给一个id名，可以直接在html中写组件的内容，不再需要使用模板字符串写模板了，既方便又快捷;

在子组件的data函数里声明一个变量（childmsg）；

在子组件中写一个点击事件@click="send（）"，send函数内部通过this.$emitthis.$emit（'childsend',this.childmsg）向父组件发送数据；this.$emit的第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值；第二个参数为要传给父组件的数据；

Vue.component('Child',{
    template:'#tp',
    data() {
        return {
            childmsg:'这是子组件中的数据'
        }
    },
    methods: {
        send() {
            // 第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值
            // 第二个参数为要传给父组件的数据
            this.$emit('childsend',this.childmsg)
        }
    }
})
<!-- 子组件模板内容 -->
<template id="tp">
    <div>
        <button @click="send">点我向父组件传值</button>
    </div>
</template>

在父组件中，通过@子组件中定义的事件名，触发一个函数rev（val）来接收数据，把接收到的val值赋给自己的变量parentmsg，然后就可以在html中使用插值表达式或v-bind绑定属性值来使用子组件发送的数据了。

<div id="app">
    <Child @childsend="rev"></Child>
    <h3>{{parentmsg}}</h3>
</div>
methods: {
    // 父组件接收数据的函数
    rev(val) {
        // val就是子组件发送的数据
        this.parentmsg = val
    }
}

三、总代码和运行结果

<!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>子向父传值</title>
</head>
<body>
     <!-- 父组件 @childsend="rev" -->
    <div id="app">
        <Child @childsend="rev"></Child>
        <h3>{{parentmsg}}</h3>
    </div>
    <!-- 子组件 this.$emit('childsend',this.childmsg) -->
    <template id="tp">
        <div>
            <button @click="send">点我向父组件传值</button>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        // 自定义子组件
        Vue.component('Child',{
            template:'#tp',
            data() {
                return {
                    childmsg:'这是子组件中的数据'
                }
            },
            methods: {
                send() {
                    // 第一个参数为事件名，自定义的，父组件需要通过这个事件名接收值
                    // 第二个参数为要传给父组件的数据
                    this.$emit('childsend',this.childmsg)
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                parentmsg:''
            },
            methods: {
                // 父组件接收数据的函数
                rev(val) {
                    // val就是子组件发送的数据
                    this.parentmsg = val
                }
            }
        });
    </script>
</body>
</html>

点击之后父组件才能访问子组件中的数据

到此这篇关于Vue子组件向父组件传值示范方法的文章就介绍到这了,更多相关Vue子向父传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue之父组件向子组件传值并改变子组件的样式

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了. 想实现的效果: vue父组件向子组件传值具体实现代码: 父组件的代码: <!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" c

  • VUE子组件向父组件传值详解（含传多值及添加额外参数场景）

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • vue3父组件和子组件如何传值实例详解

    vue3父组件和子组件如何传值实例详解

    目录 1.父组件打开子组件的的dialog组件 2.父组件关闭子组件的的dialog组件 3.开始运用: 用户的增加修改操作 1.父组件的修改 2.子组件的修改 3.父组件给子组件赋值 4.子组件调用父组件方法 总结 1.父组件打开子组件的的dialog组件 新建一个vue文件命名为test 然后咱们直接从官网CV一个带有表单的dialog组件如下 //子组件 <template> <el-dialog v-model="dialogFormVisible" titl

  • vue组件间的通信,子组件向父组件传值的方式汇总

    目录 一.子组件通过this.$emit()的方式将值传递给父组件 二.通过vuex来传递组件间的数据 三.通过中央总线来传递组件间的数据 四.通过修改父组件传过来的对象属性 五.父组件使用子组件的引用ref 总结 写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信. 一般来说在vue的数据传递是在父组件传子组件通过属性来传,子组件传父组件通过事件来传值. 子组件通过通过this.$emit()的方式将值传递

  • Vue中子组件向父组件传值以及.sync修饰符详析

    目录 Vue中 常见的组件通信方式可分为三类 1. 之前的写法 2. .sync 修饰符 总结 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($p

  • 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 子组件和父组件传值的示例

    一.子组件向父组件传值 1:子组件中(例:) 2:父组件中(例:) 二.父组件向子组件传值 1:父组件中(例:) 2:子组件中(例:) 以上就是vue 子组件和父组件传值的示例的详细内容,更多关于vue 子组件和父组件传值的资料请关注我们其它相关文章!

  • 分享Vue子组件接收父组件传值的3种方式

    目录 1.简单声明接收 2.接收数据的同时进行 类型限制 3.接收数据的同时对 数据类型.必要性.默认值 进行限制 父组件代码↓ <template>     <div>         <div>父组件</div>         <Student :name="name" :age="age"></Student>     </div> </template> <

  • C#简单实现子窗体向父窗体传值的方法

    本文实例讲述了C#简单实现子窗体向父窗体传值的方法.分享给大家供大家参考.具体如下: 击Form1的button1 打开Form2 再点击Form2的button2 在button2_Click事件中 通过this.Owner将Form2的textBox2的值设置给Form1的textBox1 并关闭Form2 public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void bu

  • 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 父组件给子组件传值子组件给父组件传值的实例代码

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script> export default (){ props:["title"] //可以是数组,也可以是对象 //如何对title进行校验 //props:{ // t

  • vue 使用ref 让父组件调用子组件的方法

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • vue中实现子组件接收父组件方法并获取返回值

    目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示

随机推荐