vue子组件和父组件之间相互传值

1.子组件给父组件传值

子组件：

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

子组件向父组件传值完成

 

2.父组件给子组件传值

父组件：

<template>
    <div class="app">
        <child :inputName="name">
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
　　　　name:''
    },
    components:{
        child,
    },
    methods:{
    }
}
</script>

子组件

<template>
  <div>
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

3 父组件调用子组件的方法

父组件

<template>
    <div class="app">
        <child ref="mychild">
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
　　　　name:''
    },
    components:{
        child,
    },
    methods:{
        runChildMethod(){
           this.$refs.mychild.ChildMedhod(val,this.name);
        }
    }
}
</script>    

子组件

<template>
  <div>
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
        methods:{
            //父组件可以调用子组件的方法
            ChildMethod(val){
              alert(val)
            },
        }
  }
</script>