vue父子组件之间传值的方法

一、基本父子传值

父传子

方式：

props

效果：

把父组件的fatherName属性传入子组件，在子组件中使用

父组件代码：

<template><div>父组件：{{fatherName}}<SonVue :fatherName="fatherName"></SonVue></div>
</template>

子组件代码：

<template><div>子组件：{{fatherName}}</div>
</template><script>
export default {props:['fatherName']
}
</script>

子传父

方式：

$emit

效果：

在子组件触发事件，修改父组件的fatherName属性

父组件代码：

父组件
<template><div>父组件：{{fatherName}}<SonVue @sendChangeName="ChangeName"></SonVue></div>
</template>
<script>
import SonVue from './components/Son.vue';
export default {data(){return {fatherName:'yj'}},methods:{ChangeName(v){this.fatherName = v}},components:{SonVue}
}
</script>

子组件代码：

<template><div>子组件：<button @click="ChangeName">修改父组件的fatherName</button></div>
</template><script>
export default {methods: {ChangeName(){this.$emit('sendChangeName','yj666')}}
}
</script>

兄弟传值

方式：

eventBus.js

效果：

任意组件之间相互传值

代码：

略

二、ref 父传子

方式：

$refs

效果：

把父组件的fatherName属性传入子组件，在子组件中使用

父组件代码：

<template><div>父组件：{{fatherName}}<SonVue ref="dom"></SonVue><button @click="$refs.dom.fatherName = 'yj666'">传递新值</button></div>
</template>

子组件代码：

<template><div>子组件：{{fatherName}}</div>
</template>
<script>
export default {data(){return {fatherName:''}}
}
</script>

三、v-model 父子传值

方式：

在父组件中使用 v-model

效果：

父子组件之间相互传值

解释：

v-model 的父子传值模式其实是绑定的 value 属性和 input 事件的语法糖，可以由 props+$emit 模式演变而来

props+$emit：

父组件代码：

<template><div>父组件：{{fatherName}}<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue></div>
</template>
<script>
import SonVue from './components/Son.vue';
export default {data(){return {fatherName:'yj'}},methods:{ChangeName(v){this.fatherName = v}},components:{SonVue}
}
</script>

子组件代码：

<template><div>子组件：{{fatherName}}<button @click="ChangeName">修改父组件的fatherName</button></div>
</template><script>
export default {props:['fatherName'],methods: {ChangeName(){this.$emit('sendChangeName','yj666')}}
}
</script>

核心代码改造:

<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
<!--
改造：修改变量名和事件名
1. 把fatherName改造为value
2. 把自定义事件sendChangeName改造为input
3. 把事件ChangeName改造为fn
4. 进一步把事件ChangeName改造为 value => value = v
5. 或者  把事件ChangeName改造为 value = $event
--><SonVue :value="value" @input="v => value = v"></SonVue>
<SonVue :value="value" @input="value = $event"></SonVue><!--
联想：v-model 其实也可以由绑定事件:value="value" + 事件监听 @input="v => value = v" 组成
意味着： :value="value" @input="v => value = v" 可以替换为 v-model = ‘value’
效果：将父组件属性 vlaue 值传递到子组件中使用，并子组件触发自定义事件 input 来改变父组件中 value 的值
--><SonVue v-model="value"></SonVue>

v-model

父组件代码：

<template><div>父组件：{{value}}<SonVue v-model="value"></SonVue></div>
</template><script>
import SonVue from './components/Son.vue';
export default {data(){return {value:'yj'}},components:{SonVue}
}
</script>

子组件代码：

<template><div>子组件：{{value}}<button @click="$emit('input','yj666')">修改父组件的value</button></div>
</template><script>
export default {props:['value']
}
</script>

问题：

父组件变量只能叫 value
子组件自定义事件只能叫 input

解决：

通过设置子组件身上的model属性，来更改变量名name和自定义事件input的问题

model:{prop: 'newValue',event: 'newInput'
}

父组件代码：

<template><div>父组件：{{newValue}}<SonVue v-model="newValue"></SonVue></div>
</template><script>
import SonVue from './components/Son.vue';
export default {data(){return {newValue:'yjj'}},components:{SonVue}
}
</script>

子组件代码：

<template><div>子组件：{{newValue}}<button @click="$emit('newInput','yj666')">修改父组件的value</button></div>
</template><script>
export default {props:['newValue'],model:{prop: 'newValue',event: 'newInput'}
}
</script>

优势：

v-model模式父子传值比props+$emit模式更加简单

缺点：

不能够一次传递多个属性，通过方法四可以处理

四.sync修饰符父子传值

方式：

在父组件中使用绑定修饰符 :newValue.sync = ‘newValue’

效果：

父子组件之间相互传值

解释：

.sync 的父子传值模式其实是绑定的属性和事件的语法糖

:val.sync = ‘val’ 等价于 :val"val" @update:val = “val = $event”

props+$emit 模式核心代码：

父组件代码改造：

<SonVue :fatherName="fatherName" @sendChangeName="ChangeName"></SonVue>
<!--
第一次父改造：修改自定义事件名和事件内容
1. 把自定义事件sendChangeName改造为update(此时可以任意命名)
2. 把事件名ChangeName改造为具体代码 fatherName = $event
-->
<SonVue :fatherName="fatherName" @update="value = $event"></SonVue>
<!--
第二次父改造：
1. 去掉 @update="value = $event"
2. 加入.sync修饰符
-->
<SonVue :fatherName.sync="fatherName"></SonVue>

子组件代码改造：

<button @click="ChangeName">修改父组件的fatherName</button>
<!--
第一次子改造：修改事件内容
1. 把自定义事件sendChangeName改造为$emit('newValue','yj666')
-->
<button @click="$emit('newValue','yj666')">修改父组件的value</button>
<!--
第二次子改造：确保和父组件事件挂钩（第二次改造时去掉的事件和内容）
1. 在$emit('newValue','yj64666')的属性前，加入事件名update （此时必须是update的事件名）
-->
<button @click="$emit('update:newValue','yj64666')">修改父组件的value</button>

vue父子组件之间传值的方法相关推荐

Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
Vue父子组件之间传值
组件分两种,全局组件和局部组件全局组件这么写 Vue.component("nav-bar",{props:['navShow',"elecText",&qu ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...

vue父子组件之间传值的方法

vue父子组件之间传值的方法

一、基本父子传值

父传子

方式：

效果：

父组件代码：

子组件代码：

子传父

方式：

效果：

父组件代码：

子组件代码：

兄弟传值

方式：

效果：

代码：

二、ref 父传子

方式：

效果：

父组件代码：

子组件代码：

三、v-model 父子传值

方式：

效果：

解释：

props+$emit：

父组件代码：

子组件代码：

核心代码改造:

v-model

父组件代码：

子组件代码：

问题：

解决：

父组件代码：

子组件代码：

优势：

缺点：

四.sync修饰符 父子传值

方式：

效果：

解释：

props+$emit 模式核心代码：

父组件代码改造：

子组件代码改造：

vue父子组件之间传值的方法相关推荐

最新文章

热门文章

四.sync修饰符父子传值