Vue中的父子组件传值及传方法

// 父组件
<template>
    <div>
        <!-- 父组件中引入子组件，并传入子组件内需要的值 -->
        <child :message="father"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        data() {
            return {
                //定义需要传入的值
                father: '传给子组件的值'
            }
        },
        components: {
            child
        }
    }
</script>


// 子组件
<template>
    <div>
        <div>{{message}}</div>
    </div>
</template>
<script>
    export default {
        //在子组件中注册props,并使用父组件中传递过来的数据
        props: {
            message: String
        },
    }
</script>

// 父组件
<template>
    <div>
    <!--自定义事件child,事件名为parent（parent事件用于接收子组件传递过来的值）-->
        <parent @child="parent"></parent >
    </div>
</template>
<script>
    export default {
        data: {
            message: ''
        },
        methods: {
            parent(val) {
                this.message = val;
            }
        }
    }
</script>

// 子组件
<template>
    <div>
    <!--点击按钮触发send事件，把message传给父组件-->
        <button @click="send">Send</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '我是子组件的消息'
        }
    },
    methods: {
        sendMes() {
            this.$emit('child', this.message);
        }
    }
}
</script>

// 父组件
<template>
  <div @click="handleParent">
    <children ref="mychild"></children>
  </div>
</template>

<script>
  import children from 'children.vue'
  export default {
    components: {
      children
    },
    methods:{
      handleParent() {
        this.$refs.mychild.childMethod();
      }
    }
  }
</script>

// 子组件
<template>
  <div></div>
</template>

<script>
  export default {
    methods:{
      childMethod() {
        console.log('My name is child')
      }
    }
  }
</script>

// 父组件
<template>
  <div>
       <child @listenChild="showFrom"></child>
       <div>{{ value }}</div>
  </div>
</template>

<script>
import child from './compontents/child.vue'
export default {
    components:{child},
    data () {
        return {
        value:''
        }
    },
    methods: {
        showFrom(data){
            this.value = data
        },
    }
}
</script>

//子组件
<template>
  <button @click="send()">
     我是子组件,点击我向父组件传值
  </button>
</template>

<script>
  export default {
    data(){
      return {
        message:'子组件的数据'
      }
    },
    methods:{
      send() {
        this.$emit("listenChild",this.message)
      }
    }
  }
</script>

handleClick(){
    //response为要传的值
    this.$root.$emit('change',response)
}

handleClick(){
    this.$root.$on('change',(item)=>{
        console.log(item) //item就是广播事件的response
    })
}

//在vue对象的methods域中定义个函数专门移除事件监听器
offListener() {
    this.$root.Bus.off("事件名");
    this.$root.Bus.off("事件名");
    this.$root.Bus.off("事件名");
},

//在beforeDestroy钩子中调用此函数
beforeDestroy() {
    this.offListener();
},