vue 父子组件传值

父组件parent.vue  子组件 son.vue

 

没有点击子组件的按钮，子组件的值不会传到父组件

 

点击按钮之后，子组件的值传到了父组件

 

 

父组件 parent.vue 的代码

<template>
    <div>
      <h1>我是父组件</h1>
      {{fczdz}}
      <son @fcz="fczff" class="son" :aa="msg"></son>
    </div>
</template>

<script>
  import son from "./Son"
    export default {
        name: "parent",
        components:{
          son
        },
        data(){
          return{
            msg:"这是父组件的值",
            fczdz:""
          }
        },
      methods:{
          fczff(msg2){
            this.fczdz=msg2;
          }
      }
    }
</script>

<style scoped>
.son{
  background-color: #ff6700;
  width: 400px;
}
</style>

　　子组件son.vue的代码

<template>
    <div>
      <h1>我是子组件</h1>
      <h2>这是子组件，后面的值是父组件的</h2>{{aa}}
      <br>
      <br>
      <br>
      <button @click="dian">点我</button>
    </div>
</template>

<script>
    export default {
        name: "son",
        props:["aa"],
        data(){
            return{
              msg2:"这是子组件的值"
            }
        },
      methods:{
          dian(){
            this.$emit("fcz",this.msg2)
          }
      }

    }
</script>

<style scoped>

</style>