vue子组件向父组件传值（vue组件之间传值常用）

本文目录

• vue组件之间传值常用
• vue父组件与子组件之间的传值
• vue 父子组件传值方法总结(六种方法)
• vue的组件间的参数传递
• vue2 父子传值 （初学者）内容可能不太规范 欢迎大家指导
• vue中父子传值
• Vue组件之间传值方式
• vue父子组件数据传输以及实现父子组件数据双向绑定
• vue子父组件通信怎么实现
• vue组件父传子、子传父、兄弟组件之间传值

vue组件之间传值常用

父组件向子组件传值主要是给到子组件一个props属性，并将该属性按类型设置为默认值（0或者空）。例子，父组件页面注入的子组件标签中加上   :这是子组件中props添加的值="这是父组件data需注册的值" ， 父组件data实现相应数据业务逻辑，即可。

子组件传给父组件则比较麻烦，子组件method需要用this.$emit(’父组件上的绑定值’)，父组件的标签元素绑定   :这是父组件需要注册的方法="父组件上的绑定值"，父组件的method里面要注册    这是父组件需要注册的方法(){……}

兄弟组件（组件1&组件2）间传值沿用上述两个方法，思路为：子组件1传值给父组件，父组件再传值给子组件2。

vue父组件与子组件之间的传值

好好生活 -- 即将拥有八块腹肌的程序员

1.父子组件的传值

        父传子通过props传递，子传父通过$emit

        还有兄弟传值公共的bus,夸组件传值vuex

传值的方式有很多种，这里就先介绍下简单的父子传值
父传子
通过在子组件上自定义属性，将data流入，子组件可以通过props来接受流入的值如图：
最后通过this.program的方式可以直接使用这个值
子传父

由于数据是单向流通的这里不能再通过props在子组件传值给父组件，需要通过$emit的方式去触发事件将子组件的值传递给父组件如图：

通过自定义方法在父组件methods中用于接收子组件传递的数据,子组件中通过this.$emit("weekFn", res.data.enable);语句，weekFn：在父组件中自定义的方法名，res.data.enable传递给父组件的数据，weekFn（value）{value用于接收子组件传递过来的值}。
说到这其实这个也可以进一步简化，通过sync修饰符将自定义方法和自定义属性简化为,如图：
通过this.$emit(’update:program’, res.data.enable)语法可以直接修改data的值，为什么能修改呢 看下下面的图就知道了

    

sync其实就是一个语法糖，他将自定义方法这一步简化了，通过.sync直接将赋值这一步合并。

关于公共bus，感觉功能并不是很实用，vuex可以完全替代这个这里就不详细讲解了，下一章就详细讲解vuex中的值传递。

vue 父子组件传值方法总结(六种方法)

1.props

子组件:

 props:

父组件:

2.$parent

子组件接收:

this.$parents.msg//这个msg是父组件的msg

3.依赖注入

通过父组件提供给后代组件曝露的属性和方法

父组件:

  data(){

return{

name:"父亲的名字"

          }

  },

provide:function(){

return{

getName:this.name

              }

        }

子组件接收:

inject:

1.emit

自定义事件

    子组件《child》:

this.$emit("increment","我是子组件")//increment: 随便自定义的事件名称  第二个参数是传值的数据

    父组件《Father》:
      methods:{

        f1(data){

console.log(data)//打印"我是子组件"

          }

      }

2.ref

子组件 《Child》:

  data(){

return{

name:"我是子组件"

          }

        }

父组件 《Father》:

  methods:{

      this.$refs.child_id.name  //这个name是子组件的name

    }

3.终极方法

使用状态管理工具,例如Vuex

vue的组件间的参数传递

vue的组件间传值可分为以下几种情况：

1.父子组件间的传值：通过props传值。父组件引入封装好的子组件，通过变量 占位传值，在子组件中通过props接收数据。

2.子父组件传值：子组件通过$emit方法传递参数：

   例如：this.$emit(’emitEvent’,data,’传递的参数或值’) 

   父组件中：

《template @emitEvent=’ievent’》《/template》

methods：{

     ievent（..data）{

    console.log（‘allData’,data）

      }

        }

3.watch监听变化：

1.watch是一个对象，有键（要监听的对象），值（对象发生变化，执行的函数。

值可以是函数，也可以是函数名。

例如：

4.父组件引用封装出去的子组件

5.通过动态组件：

注意：通过使用预定义的标签《component》可以动态的绑定is特性，使得多个组件有一个共同的挂载点，实现动态切换。

《keep-alive》标签会把切换出去的组件保留在内存中，可以保留他的状态或避免重新渲染
6.兄弟之间传值：eventBus传值（中间代理人）

首先先创建这个中间代理人（eventbus）
A组件向B组件传值，A组件中要通过eventbus总线触发相应的事件
B组件要在钩子函数中监听相应的事件：
ps:解释的不好大家见谅，欢迎大家评论，提出意见

vue2 父子传值 （初学者）内容可能不太规范 欢迎大家指导

                    父子传值
所有的生命周期函数都是自执行函数

$emit  把事件抛给父页面  通过自定义事件让父页面进行处理
组件

组件的核心概念: 可复用性强

组件的名字可以随意起 一般都使用驼峰命名法 但是标签一般使用  — 连接

例 ： 《my-Header》 《/my-Header》
传值和传引用的区别

传值指的是传String、布尔等基本类型值；传值只改变所设定的要改变的值

引用指的是传对象、数组等引用类型值；传引用当改变一个数据的值，则与该绑定的值相关的值都会发生变化

 props 父向子传值 ：
 例如这张图片上的按钮 不同样式可以切换不同的类型 就是使用了父传子

例如：这是子组件 使用props定义类型

可以是 number Arry object 等类型

default 默认值 例如传的是Boolean类型default默认为true或false
、
  这是父组件 使用:定义内容上面子组件规定了 title和sc是字符串类型

这是效果 这里展示了 组件内容的重复使用

子传父$emit

$emit 有两个参数 第一个是自定义事件的名字

这是子页面 写了一个点击事件
使用emit自定义一个事件名字 传递给父组件
父组件接收
 下面模仿element-ui封装不同按钮的类型可以对应不同的按钮样式
第一步：子组件定义一个按钮 这里定义了type类型
 父组件 引入 注册 使用
这是没改变前的效果
第二步：子组件 动态绑定一个actives
然后开启监听 immediate是立即执行
这是父组件
然后在子组件添加样式
效果
总结: 在子组件上面绑定一个属性属性名必须是:class 属性值名字可以随便起

然后在父组件定义了一个数据 内容 可以随便起

然后在组件监听type 并开启立即执行这样就不用等带type变化了

并且把父组件传递的名字的定义一个样式赋值给动态绑定的属性

这是子：
这是父：
然后：
这里记录一下 input 和button的轮廓线属性

设置轮廓线的颜色
  outline-color: red;
这是效果

outline: none;

设置轮廓线的隐藏

vue中父子传值

3父组件是App.vue   子组件是one.vue

（1）在父组件中引用子组件

    （2）    在子组件中自定义可以接收的属性：

  （3）这时候，我们就可以在子组件中使用这个data了(. 如果我们直接改变props的data属性的值，会报错(怕我们数据流发生混                                      乱)，所以我们要定义一个属性初始化这个传过来的name )
       （1） 子组件通过this.$emit()的方式将值传递给父组件，父组件用函数的方式接收。
        （2）父组件用函数的方式接收。注意：这里的send是父组件中绑定的函数名父子组件中命名要一致

             (3)通过父亲中的函数，就可以拿到传过来的数据了

Vue组件之间传值方式

总结：
父组件想要向子组件传值，那么必然有一个地方是相互衔接的，意思就是我们要找到父组件与子组件之间的那个契合点。

契合点就是：子组件引入的地方

那么我们可以自定义一个属性来存放父组件向子组件传递的数据。

这样，父组件就把值传出去了，那么就回到子组件来接收这个值

到这里，子组件就拿到了父组件传递过来的值了
子组件使用该值

总结：
子组件向父组件传值，同样的他们之间的契合点也是子组件引入的地方。

首先来到子组件，用$emit发射数据

然后再来到父组件，在契合点的地方

这种组件之间的传值就有点麻烦了

思路：
1、干嘛要把数据写到子组件呢，直接写到父组件吧！
2、把子组件A的数据，先传到父组件，然后父组件，再传递给子组件B
3、定义一个空的vue实例化对象，用于出发和监听实例，相当于第三方

略

vue父子组件数据传输以及实现父子组件数据双向绑定

1.父传子，子接受用props

  a.父组件中要做的事情

      在父组件中引入子组件：

并在components中声明该组件

b.子组件中要做的事情

     在子组件中props的方式接受，这里有两种方法：props:,还有就是图片中对象的方式，只是对象的方式能够设定传值的类型。

在子组件中的使用如第二个红色的标出的部分，直接使用  this.rules

2.子传父，子用$emit（派发自定义事件）

父子组件间传值是单向数据流，即父传子，但是子不能修改被传过来的数值，如果子要修改还需通知父组件来修改（目前学到的内容来说是这样的），所以父传子的时候，是传递事件，并在父组件中调用该函数

a.父组件要做的

在父组件中引入子组件，如图所示
第二幅图，即为绑定的事件传参即为子传给父的数据

b.子组件

3.父子组件数据的双向绑定

在子中改父中也可以检测到，就像v-model一样，（v-model是value="inputvalue" @input="inputHandler"封装的语法糖）

在子组件中的设置：
此处的 :value="inputvalue" @input="inputHandler" 就是实现与父组件双向绑定的关键

vue子父组件通信怎么实现

vue的父子组件间通信可以总结成一句话：父组件通过 给子组件下发数据，子组件通过触发事件给父组件发送消息，即 向下传递，事件向上传递。

父组件向子组件传值（父传子）通过props

子组件的 props 选项能够接收来自父组件数据。

props 是单向绑定的，即只能父组件向子组件传递，不能反向。

传递的方式也分为两种：一种为静态数据，直接传数据，一种为动态传递，动态绑定属性

子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

$emit(eventName, )

eventname是事件名称，在父组件中接受也需要一样，args是要传递的数据，如果只传一个值，默认$event接受

$emit 绑定一个自定义事件 event，当这个这个语句被执行到的时候，就会将参数 arg 传递给父组件，父组件通过 @event 监听并接收参数。

也就是子组件绑定父组件中的方法，通过回调，将数据传递给父组件。

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过 $emit;

原理是：vue 一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线。兄弟组件接收方式与父组件接收方式一样

如果子向父传值，传输的值需要接受修改，可以使用v-model，props使用value接受，事件使用input。

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

1、在父组件中传入子组件child3

2、传入时，使用v-bind指令绑定2个属性parameValue和parameValue2

2、在子组件child3中使用props接收(接收一个数组，数组中分别为父组件传递过来的属性parameValue和parameValue2，类型为字符串，也可以接收一个对象，键为传递过来的属性，值为字符串String)，

3、将传递过来的属性在DOM中以变量的形式渲染

子传父需要事件触发

1、在子组件child4中，在方法中使用$emit函数传递，第一个参数为监听的事件，第二个参数为要传递的值

2、在父组件child4中，使用传递的事件进行监听，监听到后调用函数fn

3、函数接收一个参数，这个参数就是子组件child4传递的参数