0. vue数据传送介绍

a. 想在一个组件里面，引用另一个组件的数据

b. 可以用vuex或者本文写的三方法

c. 规律：父拿的都是key，子拿的是数据/函数(回调)

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

触发自定义事件：this.$emit('atguigu',数据)

解绑自定义事件this.$off('atguigu')

组件上也可以绑定原生DOM事件，需要使用native修饰符。

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

一. 父传子

1. 在需要使用父组件值的标签处，添加一个自定义属性

<!--    1-->
<Header :father_son="cart_length"></Header>

2. 在父组件中赋值

cart_length: 12,

3. 在子组件中写一个props

// 父传子
props: ['father_son',],

4. 在子组件中使用

<b>{{ father_son }}</b>

二. 子传父

1. 在需要使用父组件值的标签处，添加一个自定义事件

<CartItem v-for="(cart_val,cart_index) in courseData" :key="cart_val.id" @father_del="father_val(cart_index)"></CartItem>

2. 父组件写一个函数，进行逻辑处理

 // 2 自动执行 子-父  都是父亲拿值，儿子拿keyfather_val(val) {// val 当前传的值},

3. 子组件传值

   this.$emit('father_del') // 3. 也可以传参 ，this.$emit('father_del',1)

三. 兄弟相传(需要借助一个公交车)

例子：A放值，B取值

首先都需要一个公交车

let bus = new Vue();

1. A 放值

bus.$emit('TestData','dbj')

2. B取值

bus.$on('TestData',(val)=>{console.log(val);})

vue2入门----父传子/子传父/兄弟相传相关推荐

vue2的三种传值方式之父传子、子传父、兄弟共享数据
vue2的三种传值方式之父传子.子传父.兄弟共享数据 1. 父传子  <template><div class="app"&g ...
Vue2父传子、子传父和兄弟间互传
首先创建局部组件来完成之间的传值. 一.父组件给子组件传值父类组件: 使用props属性,父组件向子组件传递数据. <template><div id="app" ...
【vue2】子组件向父组件传参方法汇总
一.前言最近在复习vue,总结一下父子组件通信的方式.希望能够一起进步. 二.代码 1.项目介绍有三个子组件,School.vue.Student.vue.Grade.vue.其中App.vue引 ...
子组件向父组件传参的几种方法
子组件向父组件传参的几种方法在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法.作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组 ...
Vue3中的父传子和子传父如何实现
大家都知道Vue2中父传子是通过父组件绑定一个属性,子组件再用props进行接收,子传父是通过this.$emit那么Vue3中有什么不同呢?以下为您解答谜团 #Vue3的父传子一.现在父组件调用子 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
android触摸事件透传,Android中父View穿透子View响应长按事件
释放双眼,带上耳机,听听看~! 需求在实际项目开发中,有这样的需求,长按整个ViewGroup响应长按事件,例如长按弹出对话框或者popwindow等等问题针对这个需求出现两种情况: 1,当Vi ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...

vue2入门----父传子/子传父/兄弟相传

0. vue数据传送介绍

一. 父传子

1. 在需要使用父组件值的标签处，添加一个自定义属性

2. 在父组件中赋值

3. 在子组件中写一个props

4. 在子组件中使用

二. 子传父

1. 在需要使用父组件值的标签处，添加一个自定义事件

2. 父组件写一个函数，进行逻辑处理

3. 子组件传值

三. 兄弟相传(需要借助一个公交车)

首先都需要一个公交车

1. A 放值

2. B取值

vue2入门----父传子/子传父/兄弟相传相关推荐

最新文章

热门文章