vue父子之间如何传递值

关于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>

// 重点是了解子传父，父传子，自定义事件（子传父）。