vue 实现,子组件向父组件 传递数据

首先理清组件之间的关系

组件与组件之间,还存在着不同的关系。父子关系与兄弟关系(不是父子的都暂称为兄弟吧)。

父子组件

父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。

先写子组件:

绑定一个单击事件

   <el-button type="primary" icon="el-icon-search" @click="search"  style="background: #5b6270; border: none;">搜索</el-button>

定义数组:用来存值,然后传递给父组件

export default {
        data() {
            return {
                childByValue:[]   //先定义一个数组
            };
        }  }
methods: {
            search: function() {
                const inp = this.input;
                if (inp ==="") {
                    this.selectAll(); //如果为空 则执行selectAll去
                } else {
                    this.$axios.get(‘http://localhost:9999/search?productName=‘ + inp).then(res => {
                        if (res.data === "error") {
                            alert("抱歉,没有查询到你需要的商品");
                        } else {
                            this.childByValue = res.data;      //给数组赋值
                            this.$emit(‘childByValue‘, this.childByValue) //发射、广播出去 主要这里
                        }
                    })
                }
            }    }

然后子组件就写完了

父组件:

使用components      翻译就是:组成的意思

import headers from ‘./Head.vue‘   //导入子组件
    export default {
        components: {
            headers: headers   //这里是import 导入的名字一致
        }
    }

使用子组件

    <headers @childByValue="childByValue"></headers>

截图:

另外 还需要绑定事件来接受数据

methods: {
            childByValue(value) {
                console.log(value);//接收子组件的数据然后你想干嘛就干嘛
            }
        }

原文地址:https://www.cnblogs.com/nongzihong/p/10287211.html

时间: 2024-10-07 12:15:00

vue 实现,子组件向父组件 传递数据的相关文章

Vue子页面给父页面传递数据

子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递到父页面</button> </div></template> <script> export default { name: 'child', data() { return { msg:'子组件数据' } }, computed:{ addNum(){ re

子窗口向父窗口传递数据

父窗口: 子窗口: 点击"Form1"对话框上的"Form2"按钮后弹出"Form2"对话框,在输入框中输入"1111111",关闭对话框"Form2"时将值赋给"Form1"上的输入框中. 实现代码如下: public partial class Form1 : Form { public void SetValue(string sStr) { textBoxX1.Text = sS

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

<!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" con

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

vuejs子组件向父组件传递数据

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="

vue系列(一)子组件和父组件

父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top"> <span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{ite

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

Vue 子组件传父组件

vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用this.$emit的方法来传. saves () { localStorage.setItem('note', this.note); this.h1 = localStorage.getItem('note'); console.log(this.h1) // this.conShow = true

vue.js(18)--父组件向子组件传值

子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称. props数组中的数据是只读的,父组件中的data是可读可写的. 子组件自己的data,子组件可直接访问,与父组件无关. <div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组