vue父子传值,兄弟传值,子父传值详解

目录
  • 一、父组件向子组件传值
    • 1.父组件.vue
    • 2.子组件.vue
  • 二、兄弟组件间传值还可以通过中间件Bus
    • 1.A组件.js
    • 2.B组件.js
  • 三、子组件向父组件传值
    • 1.父组件.js
    • 2.子组件.js
  • 总结：

一、父组件向子组件传值

1.父组件.vue

// 父组件中
<template>
    <div>
        <Child ref="child" :title="value"/>
    </div>
</template>
<script>
export default {
    data() {
    	return {
    		value: 'hello world!'
    	}
    }
}
</script>

2.子组件.vue

// 父组件中
<template>
    <div>
       <span>{{title}}</span>
    </div>
</template>
<script>
export default {
  props: {
    title: {
      	type: String,
      	default: ''
    }
  }
}
</script>

//title值为'hello world!

二、兄弟组件间传值还可以通过中间件Bus

$emit 传值

$on 接收

$off 删除传输事件

1.A组件.js

this.$bus.$emit("flag",true)

2.B组件.js

mounted() {
    this.$bus.$off('flag')
    this.$bus.$on('flag', data=> {
      this.flag= data
    })
  }

三、子组件向父组件传值

1.父组件.js

<template>
    <div>
        <Child ref="child" @getTitle="getTitle"/>
    </div>
</template>
<script>
import Child from './components/Child'
export default {
  components: {
  	Child
  },
  data() {
    return {
    }
  },
  method:{
  	getTitle(data){
		console.log(data)
	}
  }
}
</script>

打印结果为 hello xuliting

2.子组件.js

<template>
    <div>
       <span>{{title}}</span>
    </div>
</template>
<script>
export default {
  data() {
    return {
    title: 'hello xuliting'
    }
  },
  mounted(){
    this.getFun()
  },
  method:{
    getFun(){
     this.$emit("getTiltle",this.title)
    }
  }
}
</script>

总结：

组件间也可以通过传递方法从而解决。例如父组件为A，子组件有B和C。

父组件A调用子组件B的方法定义为aFun，把aFun传递给子组件C即可

这是在父组件中的组件C进行方法传递

<C :a-fun="aFun" />

引用的则是在组件C，通过props

props: {
    aFun: {
      type: Function,
      default: () => function() {}
    }
  }

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • vue父子组件传值以及单向数据流问题详解

    vue父子组件传值以及单向数据流问题详解

    目录 前言 1.父组件传值给子组件 2.子组件的 props 类型约束问题 (1)构造函数自定义类型 (2)自定义函数自定义类型 3.单向数据流问题 总结 前言 我们知道 vue 中父子组件的核心概念是单向数据流问题,props 是单向传递的.那究竟什么是单向数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 1.父组件传值给子组件 <div id="app"> <blog-item :title="title"></blog-i

  • 浅谈Vue3 父子传值

    目录 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 2.子组件依旧通过 props 来接收并且在模版中使用 子传父: 总结 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父组件中的数据定义为 : fatherData  , 子组件需要接收的数据定义为: sonData . // 父组件 <template> <div class="a

  • vue父子组件的互相传值和调用

    1.父传值给子组件 父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child from './child' export default { components: { child }, d

  • Vue父子组件传值的一些坑

    在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式. 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点. 1. 问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到. 2. 原因剖析 核心:双向绑定 父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变. 深拷贝与浅拷贝 下文详细讲. 3. 解决方

  • 详解Vue的七种传值方式

    1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式).如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了. 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <

  • vue 子组件和父组件传值的示例

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

  • ASP.NET页面之间传值的方式之Application实例详解

    Application Application变量在整个应用程序生命周期中都是有效的,类似于使用全局变量一样,所以可以在不同页面中对它进行存取.它和Session变量的区别在于,前者是所有的用户共用的全局变量,后者是各个用户独有的全局变量. 举例来解释: 网站访问的计数器变量一般采用Application变量,多个请求访问时共享这一个变量,均可对它进行操作,该变量可以被整个应用程序的各个页面直接使用. 用户登陆的帐号名一般采用Session变量,多个请求访问时有各自的Session变量,只能对自

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • vue前端开发层次嵌套组件的通信详解

    vue前端开发层次嵌套组件的通信详解

    目录 前言 示例 小结 前言 vue父子组件之间通过props很容易的将父组件的值传递给子组件,如果一个组件嵌套很多层,每一层之间度需要同props进行传值,很麻烦,且不易维护 示例 [示例]A组件中使用了B组件,B组件中使用了C组件,C组件需要使用A组件的数据text及使用A组件的方法getmethod.A组件代码如下: <template> <div> <P>这是A组件</P> <v-comb></v-comb> </div

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • Vue实现淘宝购物车三级选中功能详解

    Vue实现淘宝购物车三级选中功能详解

    最近在练习商城项目,记录下实现购物车三级选中的过程(小白一个,水平很菜) 效果图: 实现: 1.全选时所有商品+店铺全部选中:反之全部取消选中 2.店铺选中时,当前店铺内所有商品选中:反之取消选中 3.店铺内商品全选 → 所属店铺选中:反之取消选中店铺 4.店铺+所有商品全选 → 全选按钮选中:反之取消选中 首先说明一下,我使用了vuex来管理购物车数据,所有改变按钮状态的方法都写在mutaition里 const state = { cartList: [], // 购物车列表 totalCo

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue初始化中的选项合并之initInternalComponent详解

    今天给大家分享Vue初始化中的选项合并之initInternalComponent的相关知识,具体代码如下所示: export function initInternalComponent (vm: Component, options: InternalComponentOptions) { const opts = vm.$options = Object.create(vm.constructor.options) // doing this because it's faster tha

随机推荐