vue 父子组件、兄弟组件传值

(一)父组件给子组件传值,关键字:props

父组件:

<template>
  <div>
    <h1>父组件</h1>  <!-- 引入子组件 -->
    <child :sendMsg="fatherMsg"></child>
  </div>
</template>

<script>
import child from ‘@/components/child‘
export default {
  name: ‘father‘,
  components: {
    child
  },
  data() {
    return {
      fatherMsg: ‘嗨,儿子‘ // 传递给子组件的值
    }
  }
}
</script>

子组件:通过props拿到父组件传递过来的值

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span>
  </div>
</template>

<script>
export default {
  name: ‘child‘,
  data() {
    return {

    }
  },
  props: [‘sendMsg‘] // 拿到父组件绑定到sendMsg的值,然后在子组件下显示出来
}
</script>

(二)子组件给父组件传值:通过触发事件传递值

以上面的示例代码作为基础修改,子组件:

<template>
  <div>
    <h1>子组件</h1>
    <span>获取父组件传值:{{sendMsg}}</span><hr>
    <button @click="sendToFather">子组件给父组件传值</button>
  </div>
</template>

<script>
export default {
  name: ‘child‘,
  data() {
    return {
      childMsg: ‘这是来自子组件的数据‘
    }
  },
  props: [‘sendMsg‘],
  methods: {
    sendToFather: function() {
      this.$emit(‘getChildValue‘, this.childMsg); // 参数1 getChildValue作为中间状态,参数2 this.childMsg即为传递给父组件的数据
    }
  }
}
</script>

父组件:

<template>
  <div>
    <h1>父组件</h1>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态,然后通过getChild方法获取子组件传递的数据-->
    <child :sendMsg="fatherMsg" v-on:getChildValue="getChild"></child>
    <span>这是来自子组件的数据:{{childValue}}</span>
  </div>
</template>

<script>
import child from ‘@/components/child‘
export default {
  name: ‘father‘,
  components: {
    child
  },
  data() {
    return {
      fatherMsg: ‘嗨,儿子‘,
      childValue: ‘‘
    }
  },
  methods: {
    getChild: function(data) { // 此时的参数data为子组件传递的值,即this.$emit()的第二个参数
      this.childValue = data;
    }
  }
}
</script>

(三)同级组件传递数据

对于同级组件传值用的较多的情况,推荐直接使用vuex进行状态管理会比较方便。

原文地址:https://www.cnblogs.com/secretAngel/p/9705809.html

时间: 2024-11-04 09:47:21

vue 父子组件、兄弟组件传值的相关文章

vue的$emit 与$on父子组件与兄弟组件的之间通信

本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

vue父子组件、兄弟组件之间的通信和访问

注意:比较复杂的嵌套类的通信问题都建议使用vuex 一.父组件->子组件 (1)直接关系: 1. 属性传值(props) 2. $children(数组) 3. $refs (2)跨多层关系: 1. provide / inject 二.子组件->父组件 (1)直接关系: 1. 事件传值 2. $parent (2)跨多层关系: 1. 暂无 三.兄弟组件 (1)使用事件中心,实例化一个空的 Vue 实例(建议使用vuex) 原文地址:https://www.cnblogs.com/zhangr

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

vue 学习五 深入了解components(父子组件之间的传值)

上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 //父组件 <template> <div id="home"> <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on监听子组件事件

vue兄弟组件的传值eventbus

注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从而实现兄弟组件通信. ###~~bus.js import Vue from "vue" export default new Vue()parent.vue父组件 <template> <div id="app"> <avue>&l

创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `function`的形式在创建,并且该组件是无state状态的.具体的创建形式如下 1 import React from 'react '; 2 3 //定义一个React组件 4 function App() { 5 return ( 6 <div> 7 hello React... 8 </div

vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this.$emit("父组件上的方法名",a)     /-------a------/代表需要传递的参数        兄弟组件通讯   需要创建一个公共的vue 实例, new vue()    在main.js里 书写Vue.prototype .com=new vue()    通过pr