webpackJsonp([5],{"Gc+I":function(n,t){},dW4T:function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s={name:"parentMessageChildrenRefsDoc",components:{parentComponentByrefs:function(){return e.e(12).then(e.bind(null,"f+/I"))}},data:function(){return{parentName:"parentComponentByrefs",titles:[{title:"$refs方式",text:"ref 被用来给元素或子组件注册引用信息。$refs 是所有注册过的ref的一个集合"},{title:"优点/缺点",text:"这种方式的弊端是不能兄弟间通讯和跨级发消息"}],parentCodeTitle:"父组件代码",childrenCodeTitle:"子组件代码",parentCode:"",childrenCode:""}},props:{},watch:{},methods:{},computed:{},created:function(){},mounted:function(){},destroyed:function(){}},r={render:function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"parentMessageChildrenRefsDoc"},[e("div",[e("h1",{staticClass:"h1title"},[n._v("\n        "+n._s(n.titles[0].title)+"\n      ")]),n._v(" "),e(n.parentName,{tag:"component"}),n._v(" "),e("div",{staticClass:"code"},[n._v("\n        "+n._s(n.titles[0].text)+"\n      ")]),n._v(" "),e("h1",{staticClass:"h1title"},[n._v("\n        "+n._s(n.parentCodeTitle)+"\n      ")]),n._v(" "),n._m(0),n._v(" "),e("h1",{staticClass:"h1title"},[n._v("\n        "+n._s(n.childrenCodeTitle)+"\n      ")]),n._v(" "),n._m(1)],1),n._v(" "),e("h1",{staticClass:"h1title"},[n._v("\n      "+n._s(n.titles[1].title)+"\n    ")]),n._v(" "),e("div",{staticClass:"code"},[n._v("\n      "+n._s(n.titles[1].text)+"\n    ")])])},staticRenderFns:[function(){var n=this.$createElement,t=this._self._c||n;return t("div",{staticClass:"code"},[t("div",{pre:!0},[t("pre",{pre:!0,attrs:{class:"prettyprint lang-js"}},[t("pre",{pre:!0,attrs:{class:"prettyprint lang-js"}},[this._v('<comment>\n    # 父组件\n</comment>\n<template>\n    <div class="parentComponent parent">\n      <p>父组件</p>\n      <button v-on:click="btnClick(\'$refs方式\')">$refs方式</button>\n      <component ref="children" class="children1" :is="childrenName"></component>\n    </div>\n</template>\n\n<script>\n    //import logo from \'../../../static/logo.png\'\n    export default {\n        name: \'parentComponent\',\n          components: {\n            childrenComponent :  () => import(\'../components/childrenComponent\'),\n          },\n        data() {\n            return {\n              childrenName : \'childrenComponent\',\n            }\n        },\n        //作为子组件的时候应用父组件的时候设定的变量\n        props: {},\n        //用来观察 方法 对象 变量 有变化 走的回调方法\n        watch: {},\n        //正常方法\n        methods: {\n          btnClick (msg){\n            console.log("通知子组件",msg);\n            this.$refs.children.setParentMsg(msg)\n          }\n        },\n        //计算方法\n        computed: {},\n        //生命周期 渲染html之前 可以初始化数据\n        created() {\n\n        },\n        //生命周期 渲染html完毕 可以dom操作\n        mounted() {\n\n        },\n        //生命周期 离开这个页面\n        destroyed() {\n\n        }\n    }\n<\/script>\n\n<style scoped>\n  .parent{\n    width: 15rem;\n    height: 7rem;\n    background: aqua;\n  }\n\n</style>\n')])])])])},function(){var n=this.$createElement,t=this._self._c||n;return t("div",{staticClass:"code"},[t("div",{pre:!0},[t("pre",{pre:!0,attrs:{class:"prettyprint lang-js"}},[t("pre",{pre:!0,attrs:{class:"prettyprint lang-js"}},[this._v("<comment>\n    # 组件注释\n</comment>\n<template>\n    <div class=\"childrenComponent children0\">\n      <p>子组件</p>\n      {{parentMsg}}\n    </div>\n</template>\n\n<script>\n    //import logo from '../../../static/logo.png'\n    export default {\n        name: 'childrenComponent',\n        components: {\n            //Xgplayer :  () => import('../xgplayer'),\n        },\n        data() {\n            return {\n              parentMsg : '父组件的消息'\n            }\n        },\n        //作为子组件的时候应用父组件的时候设定的变量\n        props: {\n          children : String\n        },\n        //用来观察 方法 对象 变量 有变化 走的回调方法\n        watch: {},\n        //正常方法\n        methods: {\n          setParentMsg(msg){\n            this.parentMsg = msg;\n          }\n        },\n        //计算方法\n        computed: {},\n        //生命周期 渲染html之前 可以初始化数据\n        created() {\n\n        },\n        //生命周期 渲染html完毕 可以dom操作\n        mounted() {\n\n        },\n        //生命周期 离开这个页面\n        destroyed() {\n\n        }\n    }\n<\/script>\n\n<style scoped>\n  .children0{\n    width: 14rem;\n    height: 4rem;\n    background: #ff627a;\n  }\n</style>\n")])])])])}]};var o=e("VU/8")(s,r,!1,function(n){e("Gc+I")},"data-v-c09d0794",null);t.default=o.exports}});
//# sourceMappingURL=5.3ea60639c6bd271c9905.js.map