vue子组件给父组件传值及父组件给子组件传值

引自：https://blog.csdn.net/weixin_38888773/article/details/81902789

子组件给父组件传值

子组件：

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

子组件通过this.$emit()的方式将值传递给父组件

注意：这里的func是父组件中绑定的函数名

父组件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

父组件给子组件传值

父组件：

<template>
    <parent>
        <child :list="list"></child> //在这里绑定list对象
    </parent>
</template>
import child from 'child.vue';
export default{
  components:{child},
　　data(){
　　 return {
　　 //父组件的数据绑定到子组件的包裹层上 
　　list:["haha","hehe","xixi"];
 }
}

子组件：

<template>
   <ul>
        <li v-for="(item ,index)in list">{{item}}</li>
    </ul>
</template>
export default{
     props:{
　　　　list:{
　　　　　　type:Array,//type为Array,default为函数
　　　　　　default(){
　　　　　　　　return [
　　　　　　　　　　"hahaxixihehe"//默认初始值
　　　　　　　　]}}
　　　　},//用props属性进行传数据，此时子组件已经获取到list的数据了
       data(){
         return {}  
    }   
}