Vue里父子组间的通讯

<template>
  <div>
    <child @child-say="listenToBoy" :mes=count></child>
    <p>Do you like me?{{this.word}}</p>
  </div>
</template>
<script>
  import child from ‘@/components/child.vue‘
  export default {
    name: "parent",
    data() {
      return {
        count: 0,
        word: ‘‘
      };
    },
    components: {
      child
    },
    methods:{
        listenToBoy(text){
            if (!this.word){
                this.word = text
                console.log(‘111‘)
            }else{
                this.word = ‘‘
                console.log(‘else‘)
            }
        }
    }
  }

</script>
<style lang="css" scoped>
</style>

<template>
    <div>
        <p>{{message}}</p>
        <button @click="add">add</button>
        <button @click="onClickMe">Click</button>
    </div>
</template>
<script>
export default {
    name: "child",
    data () {
        return {
            message: this.mes,
            text: ‘I love you‘
        };
    },
    props: [‘mes‘],
    methods: {
        add (){
            this.message ++
        },
        onClickMe(){
            this.$emit(‘child-say‘, this.text)
        }
    }
    }
</script>
<style lang="css" scoped>
</style>