<comment>
    # 组件注释
</comment>
<template>
    <div class="componentImportDoc parent">
      <h1 class="h1title">
        {{titles[0].title}}
      </h1>
      <div class="code">
        <component class='children0' :is=" parentName "></component>
      </div>

      <!--原始输出到html-->
      <!--<div v-pre>{{msg}}</div>-->
    </div>
</template>

<script>
    export default {
        name: 'componentImportDoc',
        components: {
          // childrenComponent :  () => import('../childrenComponent'),
          parentComponent :  () => import('../parentComponentByrefs'),
        },
        data() {
            return {
              parentName : 'parentComponent',
              childrenName : 'childrenComponent',
              titles : [
                {
                  title : '父组件里面引用子组件'
                },
                {
                  title : '父组件与子组件通讯'
                },
                {
                  title : '子组件与父组件通讯'
                }
              ],
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {},
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

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

        }
    }
</script>

<style scoped>

</style>
