关于vue父子之间如何传递值
首先建立一个vue项目并且在components里面创建两个文件分别为header.vue和headerChild.vue并且把header.vue在app.vue引入,headerChild.vue在header.vue引入,最后引入路径在router下的index.js,保证这两个文件可以正常运行,下面开始步入正题…
1.vue中父级传递子级用props,代码如下:
下面展示一些 父传子
。
// 这是header.vue 的组件(work是父级给子级接收的数据,
title同work)
// An highlighted block
<template>
<div class="header">
头部
<HeaderChild :work="project" :title='msg'/>
</div>
</template>
<script>
import HeaderChild from "./HeaderChild"//引入子组件
export default {
name:"headers",
data(){
return{
msg:"Childtitle",
project:['title', 'likes', 'isPublished', 'commentIds', 'author']
}
},
components:{
HeaderChild//注入子组件
}
}
</script>
// 下面这是子组件headerChild.vue组件
// An highlighted block
<template>
<div>
来自父级的元素:
<p>我是子元素这是我的数据:{{title}}</p>
<p v-for="(item,index) in work" :key='index'>{{item}}</p>
</div>
</template>
<script>
export default {
props:['title','work']
}
</script>
2.vue中子级传递父级用$emit,代码如下:
下面展示一些 子传父
。
// 下面这是headerChild.vue(子组件,myEvent是传递给父级元素,父级元素接收)
// An highlighted block
<template>
<div>
来自子级的元素:
<button @click="setHandle">send</button>
</div>
</template>
<script>
export default {
data(){
return{
sendMsg:'我是子组件,我给父级传递元素来了'
}
},
props:['title','work','hubby'],
methods:{
setHandle(){
this.$emit("myEvent",this.sendMsg)
}
}
}
</script>
// 下面是父级元素
// An highlighted block
<template>
<div class="header">
头部:{{currentDate}}
<HeaderChild @myEvent="getMsgHandle"/>
</div>
</template>
<script>
import HeaderChild from "./HeaderChild"
export default {
name:"headers",
data(){
return{
currentDate:""
}
},
components:{
HeaderChild
},
methods:{
getMsgHandle(data){
// console.log(data)
this.currentDate = data
}
}
}
</script>
// 重点是了解子传父,父传子,自定义事件(子传父)。