Vue里父子组间的通讯

Posted 2020-11-02 Jack-liu

 

父组件代码

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

　　

1.实现了将count的值通过props将父组件的值给子组件,用法:在父组件中的子组件标签绑定某个属性将要传的值跟在其后(如:mes=count,给子组件识别用的)传递,子组件用props:[‘mes‘]接收,子组件调用用this.mes

2.子组件向父组件传值this.$emit(),用法:父组件监听某个属性(如@child-say=‘listenToBoy()‘)的方法,父组件方法中的形参来接收子组件传过来的值(如listenToBoy(text)),

子组件在某处触发this.$emit(‘child-say‘,this.text)