vue传值方式
父子组件传值 vue2.0
APP.vue
<template>
<h1>app根组件-尝试组件之间传值</h1>
<h2>father的值 :{{father}}</h2>
<hr>
<child :father="father" @updateFatherval="updateVal"></child>
</template>
<script>
import child from "./components/child/child.vue"
export default {
name:'app',
components:{child},
data(){
return {
father:'123',
child:''
}
},
methods:{
updateVal(val){
this.father = val
}
}
}
</script>
<style>
</style>
<template>
<h1>这是child组件</h1>
<h2>father的值{{father}}</h2>
<button @click="updateFa">向father组件传值</button>
</template>
<script>
export default {
name:'child',
//emits:['update:father'],
props:{
father:{
type:String
}
},
methods:{
updateFa(){
//this.$emit('update:father','child组件传递的')
this.$emit("updateFatherval","child组件传递的")
}
}
}
</script>
<style>
</style>
在vue2.0中,父组件向子组件传值方式是在子组件以属性绑定的方法,绑定到子组件上
<child :father="father"></child>
子组件上在pros 属性中接收:
props:{
father:{
type:String
}
},
如果子组件需要向父组件传值,使用的是自定义事件
<child :father="father" @updateFatherval="updateVal"></child>
父组件中监听 updateFatherval函数,并执行updataVal方法,修改父组件father的值,
子组件中使用this.$emit触发updateFatherval,并将需要传递的值作为第二个参数,传递给父组件的updateVal方法
this.$emit("updateFatherval","child组件传递的")
vue3.0中子组件更改父组件中的值比较简单一些
父组件中 使用 v-model对值进行双向绑定
<child v-model:father="father"></child>
子组件中 直接调用 update:father
this.$emit('update:father','child组件传递的')
兄弟组件传值 Eventbus
首先安装mitt
npm install mitt -S
创建eventBus.js文件
import mitt from "mitt";
const bus = mitt()
export default bus
app.vue
<template>
<h1>app根组件-尝试组件之间传值</h1>
<hr>
<brother1></brother1>
<brother2></brother2>
</template>
<script>
import brother1 from "./components/brother/brother1.vue"
import brother2 from "./components/brother/brother2.vue"
export default {
name:'app',
components:{brother1,brother2},
data(){
return {
}
},
methods:{
}
}
</script>
<style>
</style>
brother1.vue
brother1组件中导入 eventBus,在点击按钮试触发发送方法,发送数据
<template>
<h1>brother1组件</h1>
<span>brother1:{{brother1}}</span>
<button @click="sendBrother">向brother2组件传值</button>
</template>
<script>
import bus from './eventBus'
export default {
name:'brother1',
data(){
return {
brother1:'brother1'
}
},
methods:{
sendBrother(){
bus.emit('sendBrother2','brother1传递值')
}
}
}
</script>
<style>
</style>
brother2.vue
brother2中创建组件时,监听发送的方法,并接收数据
<template>
<h1>brother2组件</h1>
<span>brother2:{{brother2}}</span>
</template>
<script>
import bus from './eventBus'
export default {
name:'brother2',
data(){
return {
brother2:'brother2'
}
},
methods:{
},
created(){
bus.on('sendBrother2',(val)=>{
this.brother2 = val
})
}
}
</script>
<style>
</style>
后代组件
后代组件传值使用provide 和 inject
App.vue
<template>
<h1>app根组件-尝试组件之间传值</h1>
<h2>father的值 :{{father}}</h2>
<hr>
<child v-model:father="father"></child>
<!-- <child :father="father" @updateFatherval="updateVal"></child> -->
<!-- <brother1></brother1>
<brother2></brother2> -->
</template>
<script>
import child from "./components/child/child.vue"
import brother1 from "./components/brother/brother1.vue"
import brother2 from "./components/brother/brother2.vue"
export default {
name:'app',
components:{child,brother1,brother2},
provide() {
return {
grandFather: '来自父组件的父组件的数据'
}
},
data(){
return {
father:'123',
child:''
}
},
methods:{
updateVal(val){
this.father = val
}
}
}
</script>
<style>
</style>
child.vue
<template>
<h1>这是child组件</h1>
<h2>father的值{{father}}</h2>
<button @click="updateFa">向father组件传值</button>
<hr>
<grandsonVue></grandsonVue>
</template>
<script>
import grandsonVue from "./grandson.vue"
export default {
name:'child',
components:{grandsonVue},
emits:['update:father'],
props:{
father:{
type:String
}
},
methods:{
updateFa(){
this.$emit('update:father','child组件传递的')
//this.$emit("updateFatherval","child组件传递的")
}
}
}
</script>
<style>
</style>
grandSon.vue
<template>
<h1>孙子组件</h1>
<hr>
<span>{{grandFather}}</span>
</template>
<script>
export default {
name:'grandson',
inject:['grandFather']
}
</script>
<style>
</style>