正文
Vue组件传值，父传子，子传父，非父子组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue3中传值方式：
1、父组件向子组件传值
父组件Blog.vue
<template>
<div id="blog">
<Alert v-if="alert" v-bind:message="alert"></Alert>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'blog',
data () {
return {
alert:'父组件向子组件传递的值'
}
},
components:{
Alert
}
}
</script>
子组件Alert.vue
<template>
<div class="alert">
{{message}}
</div>
</template> <script>
export default {
name: 'alert',
props:['message'],
data () {
return { }
}
}
</script>
2、子组件向父组件传值
子组件child.vue
<template>
<div class="child">
<input v-on:click="sendValue" type="button" value="子组件向父组件传值">
</div>
</template>
<script>
export default{
data(){
return {
val:"子组件的value值"
}
},
methods:{
sendValue(){
this.$emit('titleChanged',this.val);
}
}
}
</script>
titleChanged是父组件中绑定的函数名
父组件father.vue
<template>
<div class="father">
<h1>{{faval}}</h1>
<child v-on:titleChanged="getValue"></child>
</div>
</template>
<script>
import child from './child.vue'
export default{
data(){
return {
faval:"Hello word!"
}
},
components:{
child
},
methods:{
getValue(data){
this.faval = data
console.log(this.faval)
}
}
}
</script>
3、非父子组件传递值
非父子组件之间传值，需要定义工具文件eventHub.js进行传值，不然路由组件之间达不到传值的效果
组件之间传递参数工具类eventHub.js
import Vue from 'vue' export default new Vue()
组件A向组件B传值
组件A.vue
<template>
<div class="classA">
<input type="button" value="A组件向B组件发送值" v-on:click="returnHome">
</div>
</template>
<script>
import Hub from './eventHub.js'
export default{
data(){
return {
msg:4
}
},
methods:{
returnHome(){
Hub.$emit('val',this.msg)
}
}
}
</script>
组件B.vue
<template>
<div class="classB">
<h3>{{name}}</h3>
</div>
</template>
<script>
import Hub from './eventHub.js'
export default{
data(){
return {
name:''
}
},
mounted:function(){
var that = this
Hub.$on('val',(data)=>{
that.name = data
})
}
}
</script>
