vue父子组件传值方法(案例)

首先创建三个.vue文件：Father.vue(父组件)、Son1.vue(子组件1)、Son2.vue(子组件2)。

目的：实现父组件同时向子组件1，子组件2传值；实现子组件1同时向父组件，子组件2传值

1.Father.vue代码如下

<template><div><h3>Father</h3>这是父组件：<input type="text" v-model="fu" ><div>父：{{fu}}</div><div>获取的son1：{{ziTOfu}}</div><hr> <!-- 为了更清楚展示，使用hr标签进行分割 --><Son1 :fathreToSon1='fu' @get='getdate'></Son1><hr><Son2 :fathreToSon2='fu' :son1Toson2='ziTOfu'></Son2></div>
</template><script>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'
export default {data(){return{fu:'',ziTOfu:''}},components:{Son1,Son2},methods:{getdate(val){this.ziTOfu = val}}
}
</script>

2.Son1.vue代码如下

<template><div><h3>son1</h3>Son1输入框：<input type="text" v-model="zi"><div>son1接收父：{{fathreToSon1}}</div><div>Son1：{{zi}}</div></div>
</template><script>
export default {props:{fathreToSon1:String},data(){return{zi:''}},watch:{zi(val){this.$emit('get',val)}}
}
</script><style></style>

3.Son2.vue代码如下

<template><div><h3>son2</h3>Son2输入框：<input type="text"><div>son2接收父：{{fathreToSon2}}</div><div>son2接收son1：{{son1Toson2}}</div></div>
</template><script>
export default {props:{fathreToSon2:String,son1Toson2:String}
}
</script>

实现结果

1.在父组件输入框中输入数据，子组件中会显示父组件传过来的数值

2.在子组件1输入框中输入数据，父组件与子组件2中会显示子组件1传过来的值

vue父子组件传值方法(案例)相关推荐

vue 父子组件传值方法总结(六种方法)
一.父组件传值给子组件 1.props 子组件: props:["name"] 父组件: 2.$parent 子组件接收: this.$parents.msg//这个msg是父组件 ...
vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言子组件向父组件传值父组件向子组件传值前言在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
vue父子组件传值的一些坑（深浅拷贝）
本文章转载:https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
vue父子组件通信方法
vue父子组件通信方法 1.父组件向子组件传值,通过自定义属性的方法: 父组件: <child :inputName="name"> 子组件: (1)props: {i ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件  <template><div class=& ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
vue 父子组件传值
父子组件传值最常用的方法(4种) 1 . 父组件传递数据给子组件(props)vue官方文档特别注意!!特别注意!!特别注意!! props传值的类型如果是Object类型,如对象,数组等,传 ...
VUE父子组件传值（含实例）
vue父子组件通信这里的movies数组和message字符串,相当于是在父组件中对要传给子组件的数据做赋值或者计算等操作. 1.父传给子(在子组件中改数据) 父组件: 1.在子组件上绑定数据arr ...

vue父子组件传值方法(案例)

vue父子组件传值方法(案例)相关推荐

最新文章

热门文章