vue父子兄传值理解

男娘i 2022-11-20 12:56 23阅读 0赞

## 父传子 ##

总结：引入、注册、调用、传值，子组件props接收

1.  引入子组件

import son from "./son.vue";

1.  components中注册子组件

components: { 
        son,
      }

1.  使用子组件并且将数据传递给子组件

<son :myname="mySonName"></son>

1.  子组件接收数据，接收方法2种

props：['myname']

props: { 
        myname: { 
          type: String,
          required: true,
        },
      },

## 子传父 ##

总结：子组件通过事件操作 使用$emit传递数据  
5. 子组件定义绑定按钮，绑定点击事件

<button @click="tellFather">点我传给父组件</button>

1.  子组件使用this.$emit(‘自定义事件类型’，需要传递的数据) 将数据传给父组件

tellFather() { 
          this.$emit("tellToFather", this.mygfName);
        },

1.  父组件监听事件，接收数据  
    注意：监听的方法必须和子组件的命名相同

<son @tellToFather="handler"></son>

## 兄弟传值 ##

总结：兄弟之间无法直接传值，可以通事件总线方法传递 （以下方法就是事件总线）

1.  需将所有兄弟组件嵌套入父组件处，操作走第一大步（引入，注册，调用）
2.  创建公共vue实例，并引入（由于this指向问题，需要创建一个公共vue实例来实现事件发出的监听问题） 创建一个js文件放下面的代码 在两个子组件中都要引入这个文件 常规命名为：eventBus.js 引入的时候命名为bus，所以下面使用的是bus.$on

import Vue from "vue";
    	export default new Vue();

1.  son组件创建按钮绑定点击事件，将数据传递出去

<button @click="tellBorder">点我传给border</button> methods: { 
        tellBorder() { 
          bus.$emit("tellToborder", this.mygfName);
        },
      },

1.  border组件中在mounted中进行监听事件（因为不知道事件什么时候触发，所以需要界面渲染就开始监听，使用bus.$on）

mounted() { 
        bus.$on("tellToborder", (data) => { 
          this.sonGFname = data;
        });
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关快速理解Vue父子组件传值

组件化开发是目前前端开发必备的开发技能，组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式，方便还没有理解的朋友学习。 1、父组件向子组件传...

谁践踏了优雅/ 2024年04月19日 09:50/ 0 赞/ 40 阅读

相关 vue 父子组件传值

父组件通过属性传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

蔚落/ 2023年07月10日 15:58/ 0 赞/ 54 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 356 阅读

相关 vue父子兄传值理解

父传子总结：引入、注册、调用、传值，子组件props接收 1. 引入子组件 import son from "./son.vue"; 1. compo

男娘i/ 2022年11月20日 12:56/ 0 赞/ 24 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 349 阅读

相关 Vue父子传值与非父子传值

父传子：主要是通过子组件使用 props() 方法来接收父组件传递过来的值 Vue.component('father',{

浅浅的花香味﹌/ 2022年05月14日 04:25/ 0 赞/ 343 阅读

相关 Vue 父子传值

参考一：父组件向子组件传值： parent： <parent> <child :message="msg"></child> </parent>

Myth丶恋晨/ 2022年04月25日 02:18/ 0 赞/ 311 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 413 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 568 阅读

相关 vue父子页面传值

1.props 传值 //父组件传递参数到自组件 <template> <div> <my-vue :name="na

小鱼儿/ 2021年08月26日 20:19/ 0 赞/ 528 阅读