浅谈VUE传值问题,父传子,子传父,兄弟传兄弟。。。

首先我们先定义3个页面,一个主页面,两个子页面

例:myForm 和 myTabel 是定义的两个子页面

第一步:在主页面引入

import myForm from "@/MyForm";

import myTabel from "@/MyTable";

第二步:在 components 注册  (注册完必须进行第三步。不然会报错)

components: {
    myForm,
    myTabel,
}

第三步:插入

<myForm></myForm>
<myTabel></myTabel>

  

传值方法-----------

父传子

例:我在data里定义了一个list的数据;

list: [
        { id: 1, name: "铁柱", age: 18, sex: "男" },
]

第一步:传递数据

 <myTabel :parentData="list"></myTabel> 

:子页面去接收的名字=‘需要传入过去的名字‘

第二步:子页面接收数据

props: [‘parentData‘]

子传父

例:

第一步:定义一个事件

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>

第二步:在methods写入方法

methods: {
    updateBtn(id) {
      this.$emit("update-data", id);
  }
}

()里,第一个参数是父页面需要接收的事件名字,第二个参数是你需要传过去的数据。

第三步:父页面接收

<myTabel :list="list"  @update-data="updateData"></myTabel>

接收使用@,第一个值在子页面定义的名字, 后面的是本页面自己定义的事件名,通过事件,拿到值

兄弟传值

首先我们在main.js定义一个方法

Vue.prototype.方法名 = new Vue()

页面一

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>
methods: {
    updateBtn(id) {
          this.public.$emit("update-data", id);
    }
}

 同理,先定义一个事件,然后, 使用 this.public.$emit("第二个页面需要接收的名字","第二个值是传的数据") 传入数据

页面二

例:在created生命周期函数里接收

created(){
    This.public.$on(‘update-data’, value=>{
        console.log(value)  取值
    })
}

this.public.$on("第一个上个页面定义的名字","第二个是一个函数(参数1:上个页面传过来的数据)")

 

原文地址:https://www.cnblogs.com/yetiezhu/p/12602486.html

时间: 2024-10-09 16:31:47

浅谈VUE传值问题,父传子,子传父,兄弟传兄弟。。。的相关文章

浅谈vue传值

vue组件之前的传值可以分为三类: 1,父传子 父传子的用法: 在子组件中需要用到父组件的值,需要在子组件中定义props选项,props:['字符串名1','字符串名2'],props中的数据和data中的数据用法一样, 使用子组件时,通过动态绑定自定义属性获取父组件的值例如:<component-a :字符串名1="父组件data中的数据" :字符串名2="父组件data中的数据"></component-a> 在子组件中使用数据,可以在

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

浅谈Java中的hashcode方法 - 海 子

浅谈Java中的hashcode方法 哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: public native int hashCode(); 根据这个方法的声明可知,该方法返回一个int类型的数值,并且是本地方法,因此在Object类中并没有给出具体的实现. 为何Object类需要这样一个方法?它有什么作用呢?今天我们就来具体探讨一下hashCode方法. 一.hashCode方法的作用 对于包含容器类型的程

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

浅谈VUE,使用watch方法监听父组件传到子组件的数据。

props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData'] 第二步动态改变值: mounted(){ this.form._name = this.updateData._name; }, 第三步使用watch监听 updateData数据 watch:{ updateData: function (newVal ,oldVal){ //不能用箭头函数 this.for

浅谈Vue项目优化

前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 转自https://blog.csdn.net/qq_33834489/article/details/79144762 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script&g

浅谈Vue模板的那些事儿

接触过vue的童鞋都知道,组件的模板一般都是在template选项内定义的,如 1 Vue.component('child-component', { 2 3 template: '<h3>我是闰土大叔</h3>' 4 5 }) 这个用法都是老生常谈了,今天来聊聊Vue的内联模板.看过vue文档的同学都知道,Vue提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template特性,组件就会把它的内容当做模板,而不是把它当成内容分发,这样做的好处是,让模板更灵

浅谈Vue的生命周期模型

Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些javascript方法中的this直接指向的是vue的实例. 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会. Vue提供的生命周期钩子如下:① beforeCreate在实例初始化之后,数据观测(da

浅谈vue.js

在使用vue.js前,首先得安装vue.js. 对于vue.js的安装,有以下几种方法: 1.通过官网下载: Vue.js 官网下载地址:http://vuejs.org/guide/installation.html 2.使用CDN方法: 以下推荐国外比较稳定的两个 CDN,个人建议下载到本地. BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js unpkg:https://unpkg.com/vue/dist/vue.js,