美文网首页
父子组件之间传值

父子组件之间传值

作者: 小白白呐 | 来源:发表于2021-12-15 15:41 被阅读0次


1、子组件通过props属性,在子组件中接收父组件传过来的值(父传子值, 推荐使用 props属性 )

父组件 子组件

2、父组件调用子组件的方法(父调子)

方法一:$refs (用于两个组件之间有关联关系的时候)

父组件 子组件

方法二:当两个组件之间没有关联关系的时候,可以用下边的方法

1) 在main。js中声明一个时间总线,$bus是自己随便起的名字,这样的做法,可以在所有的实例中都有$bus

main.js

2)然后再父组件中派发一个事件,然后需要在子组件的created中进行监听,用$on进行监听

父组件中派发事件 子组件中进行监听

3、修改父组件的值(这个不是真的修改而是通过this.$emit提交一个事件,将子组件的行为告诉父组件)(子传父,推荐使用)

子组件 父组件声明

相关文章

  • 组件之间的传值

    组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • 22.父子组件之间传值示例

    1.父子组件之间传值:

  • Vue组件之间的传值

    Vue父子组件之间的传值(props)兄弟组件 VUEX

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • vue 组件之间传值方法

    1. 父组件向子组件传值 父组件: 子组件: 2. 子组件向父组件传值 子组件: 父组件: 3. 非父子之间传值 ...

  • vue 父子组件传值 $on sync v-model

    1、正常的父子组件传值2、使用sync 实现父子组件传值3、使用v-model实现父子组件传值

  • vue--三种组件中之间的传值

    一、父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit 1...

  • 非父子组件之间的传值

    About 前面的一篇文章我们介绍了父子组件之间的传值可以通过props来实现,那么非父子组件之间如何传值呢? 一...

  • vue 6种通信总结①

    常用vue通信大概有这几种方式进行: 组件间的父子之间的传值 组件间的子父之间的传值 非组件间的组件间的传值(简称...

网友评论

      本文标题:父子组件之间传值

      本文链接:https://www.haomeiwen.com/subject/xmlpfrtx.html