美文网首页
Vue 组件如何进行传值的?

Vue 组件如何进行传值的?

作者: 新苡米 | 来源:发表于2021-05-04 13:24 被阅读0次
1、父组件向子组件传递数据

父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据
绑定在自定义属性上,在子组件添加参数 props 接收即可

2、子组件向父组件传递数据

子组件通过 vue 实例方法$emit 进行触发并且可以携带参数,父组件监听使用@(v-on)
进行监听,然后进行方法处理

3、非父子组件之间传递数据

3.1 引入第三方 new vue 定义为 eventBus

3.2)在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods 中的方法名)

3.3) 在另一个兄弟组件中的 methods 中写函数,在函数中发布 eventBus 订阅的方法eventBus.$emit("自定义事件名”)

3.4) 在组件的 template 中绑定事件(比如 click)

相关文章

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • 2020-03月前端面试题

    vue相关 vue父子组件传值方式有哪些? 兄弟组件间如何传值? vuex是用来干什么的? vuex核心模块有哪些...

  • 前端面试题:VUE

    1. vue的双向数据绑定实现原理? 2. vue如何在组件之间进行传值? 3. vuex和vue的双向数据绑定...

  • vue

    1、vue的双向数据绑定实现原理 2、vue如何在组件之间进行传值 3、vuex和vue的双向数据绑定有什么冲突 ...

  • vue 6种通信总结①

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

  • vue2 父子模版组件之间的传值

    1. 父组件传值给子组件 子组件先定义好需要父组件传的值及如何使用 文件名TestFatherToSon.vue ...

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 在vue中使用sync修饰符进行父子组件双向绑定

    今天在使用Vue进行父子组件传值的时候,需要父组件向子组件传值,同时子组件需要关闭父组件的弹窗,这就需要父子组件的...

网友评论

      本文标题:Vue 组件如何进行传值的?

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