<comment>
    # 父组件
</comment>
<template>
    <div class="parentComponentByemit parent">
      <p>父组件</p>
      <!--设置监听回调-->
      <component v-on:titleChanged="updateTitle" class="children1" :is="childrenName"></component>
      <p>{{childrenMsg}}</p>
    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    export default {
        name: 'parentComponentByemit',
          components: {
            childrenComponentByemit :  () => import('../components/childrenComponentByemit'),
          },
        data() {
            return {
              childrenName : 'childrenComponentByemit',
              childrenMsg : "孩子的消息"
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          btnClick (msg){
            console.log("通知子组件",msg);
            this.$refs.children.setParentMsg(msg)
          },
          updateTitle(msg){
            this.childrenMsg = msg;
          }
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {
        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
  .parent{
    width: 15rem;
    height: 10rem;
    background: aqua;
  }

</style>
