<comment>
  # refs模式   父组件到子组件
</comment>
<template>
  <div class="parentMessageChildrenRefsDoc">
    <div>
      <h1 class="h1title">
        {{titles[0].title}}
      </h1>

      <component :is=" parentName "></component>
      <div class="code">
        {{titles[0].text}}
      </div>


      <h1 class="h1title">
        {{parentCodeTitle}}
      </h1>
      <div class="code">
        <div v-pre><pre class="prettyprint lang-js">
<pre class="prettyprint lang-js">&lt;comment&gt;
    # 父组件
&lt;/comment&gt;
&lt;template&gt;
    &lt;div class="parentComponent parent"&gt;
      &lt;p&gt;父组件&lt;/p&gt;
      &lt;button v-on:click="btnClick('$refs方式')"&gt;$refs方式&lt;/button&gt;
      &lt;component ref="children" class="children1" :is="childrenName"&gt;&lt;/component&gt;
    &lt;/div&gt;
&lt;/template&gt;

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

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

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

        }
    }
&lt;/script&gt;

&lt;style scoped&gt;
  .parent{
    width: 15rem;
    height: 7rem;
    background: aqua;
  }

&lt;/style&gt;
</pre>
</pre></div>
      </div>
      <h1 class="h1title">
        {{childrenCodeTitle}}
      </h1>
      <div class="code">
      <div v-pre><pre class="prettyprint lang-js">
<pre class="prettyprint lang-js">&lt;comment&gt;
    # 组件注释
&lt;/comment&gt;
&lt;template&gt;
    &lt;div class="childrenComponent children0"&gt;
      &lt;p&gt;子组件&lt;/p&gt;
      {{parentMsg}}
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    //import logo from '../../../static/logo.png'
    export default {
        name: 'childrenComponent',
        components: {
            //Xgplayer :  () =&gt; import('../xgplayer'),
        },
        data() {
            return {
              parentMsg : '父组件的消息'
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {
          children : String
        },
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          setParentMsg(msg){
            this.parentMsg = msg;
          }
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

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

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

        }
    }
&lt;/script&gt;

&lt;style scoped&gt;
  .children0{
    width: 14rem;
    height: 4rem;
    background: #ff627a;
  }
&lt;/style&gt;
</pre>
</pre></div>
      </div>
    </div>

    <h1 class="h1title">
      {{titles[1].title}}
    </h1>
    <div class="code">
      {{titles[1].text}}
    </div>

  </div>
</template>

<script>
  //import logo from '../../../static/logo.png'
  export default {
    name: 'parentMessageChildrenRefsDoc',
    components: {
      parentComponentByrefs :  () => import('../parentComponentByrefs'),
    },
    data() {
      return {
        parentName : 'parentComponentByrefs',

        titles : [
          {
            title : '$refs方式',
            text : 'ref 被用来给元素或子组件注册引用信息。$refs 是所有注册过的ref的一个集合'

          },
          {
            title : '优点/缺点',
            text : '这种方式的弊端是不能兄弟间通讯和跨级发消息'

          },
        ],
        parentCodeTitle : '父组件代码',
        childrenCodeTitle : '子组件代码',

        parentCode : "",
        childrenCode:""

      }
    },
    //作为子组件的时候应用父组件的时候设定的变量
    props: {},
    //用来观察 方法 对象 变量 有变化 走的回调方法
    watch: {},
    //正常方法
    methods: {},
    //计算方法
    computed: {},
    //生命周期 渲染html之前 可以初始化数据
    created() {

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

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

    }
  }
</script>

<style scoped>

</style>
