父子组件传值的四种方式（vue父组件向子组件传值）

本文目录

• vue父组件向子组件传值
• VUE父子组件之间的传值，以及兄弟组件之间的传值
• React 父子组件通信
• 怎样操作Vue表单类父子组件数据传递
• Vue-Cli—04.父子组件传值|祖孙组件传值|兄弟组件传值
• Vue父子组件传值
• vue 父子组件传值方法总结（六种方法）
• vue组件父传子、子传父、兄弟组件之间传值
• vue父组件与子组件之间的传值

vue父组件向子组件传值

1.父组件向子组件传值，通过关键字props

（1）先定义一个父组件，一个子组件，给父组件定义一些内容

（2）子组件使用props使用cmsg来接收父组件的内容

（3）动态传值，用v-bind指令来动态绑定props的值

（4）使用props传值是单项的

2.子组件向父组件传值 通过$emit()实现

（1）使用Vue里面的$emit方法发送一个自定义事件listchange

（2）在组件上使用@listchange="ctrl" 绑定自定义事件 触发父组件的ctrl方法

（3）在父组件中的ctrl方法内把父组件的msg的值给改了

VUE父子组件之间的传值，以及兄弟组件之间的传值

一、 Vue父子 组件之间传值

vue使用中，经常会用到组件，好处是：
1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；
2、页面内容会简洁一些；方便管控；
子组件的传值是通过props来传递数据，$emit来触发事件；
下面是一个简单的子组件props传值：
父组件的部分：

首先引入组件，在组件上绑定你要传给组件的值；

然后，在组件里通过props来接收你从父页面传过来的值；so，父组件把值传给子组件就完成了；
下面是一个子组件在把值传给父组件的例子：
父组件部分：

子组件部分：

***隐藏网址***

二、 兄弟组件之间的传值
兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；
下面是一个bus实例：

1、创建一个firstChild组件，引入bus,接着一个按绑定数据传输事件：

我们通过一个 emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

下面是另一个组件，引入bus实例，通过一个p标签接收数据：

这个组件的mounted里，我们监听了userDefinedEvent事件，并把传递过来的事件通过 emit)的额外参数。

接下来就是展示真正的效果的时候了：

点击之后：

总结:
1，首先创建一个事件总线，例如bus，作为一个通讯的桥梁；
***隐藏网址***

另外：
***隐藏网址***
2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。

React 父子组件通信

父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。

父组件 Parent 引入子组件 Children ，并把 title 传递给子组件

子组件根据 props 获取父组件传过来的数据

父组件把 clearMsg 方法传递给子组件

子组件根据 props 获取父组件传过来的方法 clearMsg ，并在点击按钮的时候执行了父组件清空 msg 的方法

父组件把 this 传递给子组件

子组件根据 props 获取父组件传过来的父组件，并在点击按钮的时候获取了父组件的数据和执行了父组件清空 msg 的方法

父组件方法打印出子组件的 msg

子组件把 msg 传递给父组件的方法

父组件根据ref获取整个子组件，并获取到组件的所有数据和方法。
这里注意父组件用了 React 生命周期中 componentDidMount 方法，该方法是在页面渲染完成之后执行的方法。

------------更新start---------------
请注意： this.refs 这种方法已被废弃，如果你项目中还这么用，请尽快更改他，最新的用法如下：
***隐藏网址***

------------更新end---------------
子组件把 msg 传递给父组件的方法

tips: 上交流可能会看不到消息，如有问题，欢迎进群交流50063010

END---------------

怎样操作Vue表单类父子组件数据传递

这次给大家带来怎样操作Vue表单类父子组件数据传递，操作Vue表单类父子组件数据传递的注意事项有哪些，下面就是实战案例，一起来看一下。
使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。
在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。
与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。
1、传递基本类型数据
当子组件内容较少时，会直接传递基本类型数据，通常为String, Number, Boolean三种。
先看个例子：
《!-- 父组件 parent.vue --》
《template》
《p class="parent"》
《h3》问卷调查《/h3》
《child v-model="form.name"》《/child》
《p class=""》
《p》姓名：{{form.name}}《/p》
《/p》
《/p》
《/template》
《script》
import child from ’./child.vue’
export default {
components: {
child
}，
data () {
return {
form: {
name: ’请输入姓名’
}
}
}
}
《/script》《!-- 子组件 child.vue --》
《template》
《p class="child"》
《label》
姓名：《input type="text" :value="currentValue" @input="changeName"》
《/label》
《/p》
《/template》
《script》
export default {
props: {
// 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
value: ’’
},
methods: {
changeName (e) {
// 给input元素的 input 事件绑定一个方法 changeName
// 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
this.$emit(’input’, e.target.value)
}
}
}
《/script》给子组件的 input 事件绑定一个方法 changeName，每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
父组件通过 v-model 指令绑定一个值，来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据，如果还要子组件响应父组件传递的数据，就需要给子组件定义一个props属性 value，并且这个属性必须是 value，不能写个其它单词。
v-model 其实就是一个语法糖，详情可以参考使用自定义事件的表单输入组件。
2、传递引用类型数据
当子组件里的内容比较多时，比如子组件有多个表单元素，如果还像上面那样给每个表单元素绑定值，那就要写很多重复代码了。所以这个时候通常传递的是一个对象，传值的基本原理不变，不过写法上会有些不同。
还是先看代码：
《!-- 父组件 parent.vue --》
《template》
《p class="parent"》
《h3》问卷调查《/h3》
《child :formData.sync="form"》《/child》
《p class=""》
《p》姓名：{{form.name}}《/p》
《/p》
《/p》
《/template》
《script》
import child from ’./child.vue’
export default {
components: {
child
},
data () {
return {
form: {
name: ’请输入姓名’,
age: ’21’
}
}
}
}
《/script》《!-- 子组件 child.vue --》
《template》
《p class="child"》
《label》
姓名：《input type="text" v-model="form.name"》
《/label》
《label》
年龄：《input type="text" v-model="form.age"》
《/label》
《label》
地点：《input type="text" v-model="form.address"》
《/label》
《/p》
《/template》
《script》
export default {
data () {
return {
form: {
name: ’’,
age: ’’,
address: ’’
}
}
},
props: {
// 这个 prop 属性接收父组件传递进来的值
formData: Object
},
watch: {
// 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
// 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
formData: {
immediate: true,
handler (val) {
this.form = val
}
}
},
mounted () {
// props 是单向数据流，通过触发 update 事件绑定 formData，
// 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
// 父组件在绑定 formData 的时候，需要加上 .sync
this.$emit(’update:formData’, this.form)
}
}
《/script》props 是单向数据流，当我们需要对 props 内的属性进行双向绑定时，就需要用到.sync 修饰符，详情请参考.sync 修饰符，这里不做赘述。
这里需要注意的是，vue 中是不能直接修改 props 的，所以如果我们要向父组件传值，还是需要通过修改 data 里的值，prop 只是作为父子之间通话的中间人存在。
另外，如果我们想要预览父组件最开始传的数据，就需要通过 watch 监听 prop 的变化，在子组件初始化的时候就把值传进去。
注意： 我在子组件里把 this.$emit(’update:formData’, this.form) 放在 mounted 当中的，其原因是为了避免在每个 input 标签的 input 事件中触发自定义事件，但这样写的前提是，父子组件都要共用一个对象。
这也就是上面代码中，父组件中使用 :formData.sync="form" 绑定值时，form 是一个对象，而子组件中的触发自定义事件 this.$emit(’update:formData’, this.form) ，this.form 也得是一个对象。
这里还需要注意的是，如果有多个子组件使用一个对象，那就要避免这种写法，因为一个组件修改了这个对象的数据，那么其它子组件也就都跟着改变了。
所以我在用的时候都是给每个子组件分配了一个自己的对象，比如：
data () {
return {
parentObject: {
child_1_obj: {},
child_2_obj: {},
}
}
}这是在父组件里定义的数据，当然名字不会这样取了。
结尾
也没什么说的了，对 Vue 还是处于使用的阶段，对其底层的东西了解还不够，我也好想读读源码，但总只是想想.....大家觉得有什么不妥的地方尽管说，大家相互交流交流。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
使用JS判断字符串中包含内容方法总结
JS+HTML5实绑定鼠标事件的粒子动画

Vue-Cli—04.父子组件传值|祖孙组件传值|兄弟组件传值

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

子组件：

子组件通过$emit触发一个自定义事件，将更新的数据传给父组件。
子组件：

父组件：

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意： 后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

后代组件：

在Vue的原型对象上，添加一个 $bus属性 ，该属性的的属性值是一个Vue实例。Vue的所有实例，都将共用同一个$bus。这个$bus属性，称之为：中央事件总线。
vm.$emit( eventName, )： 触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$once( event, callback )： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( )： 移除自定义事件监听器。

main.js文件：

兄弟A鸽子组件：
点击鸽子组件中的‘修改乌鸦数据’按钮，可以修改乌鸦组件页面的数据。

兄弟B乌鸦组件：

Vue父子组件传值

通过props来传值：

静态传值就是直接通过props来传递

动态传值是通过v-bind来绑定一个要传递值的key，然后后面跟要传递的内容，不过这个内容是可以改变的

比如：

传递的值会跟着input里面输入的值改变而改变

组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时，它包含验证要求

通过ref来传值：

在父组件引用的子组件中采用ref=’要传递的值的key’

父组件中：

子组件中：

这样就将父组件中的message中的内容传递到子组件中的msg变量中

emit是子组件向父组件的传值方式

子组件可以使用 $emit 触发父组件的自定义事件

父组件：

子组件：

Slot：

父组件向子组件传递模板采用slot：

父组件中：

子组件：

如果父组件没传递模板，slot里面有内容的话，就会显示内容

如果有多个模板要进行传递，这需要在slot中通过命名（name）来区分：

父组件中：

子组件：

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组件父传子、子传父、兄弟组件之间传值

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

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

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

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

子传父需要事件触发

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

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

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

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中的值传递。