webpackJsonp([8],{"9hIH":function(n,t){},kuxu:function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={name:"childrenMessageParentEmitDoc",components:{parentComponentByemit:function(){return e.e(15).then(e.bind(null,"5gr8"))}},data:function(){return{parentName:"parentComponentByemit",titles:[{title:"$emit方式",text:"ref 被用来给元素或子组件注册引用信息。$refs 是所有注册过的ref的一个集合"},{title:"优点/缺点",text:"这种方式的弊端是不能兄弟间通讯和跨级发消息"}],parentCodeTitle:"父组件代码",childrenCodeTitle:"子组件代码",parentCode:"",childrenCode:""}},props:{},watch:{},methods:{},computed:{},created:function(){},mounted:function(){},destroyed:function(){}},s={render:function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"childrenMessageParentEmitDoc"},[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),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    ")])],1)])},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="parentComponentByemit parent">\n      <p>父组件</p>\n      \x3c!--设置监听回调--\x3e\n      <component v-on:titleChanged="updateTitle" class="children1" :is="childrenName"></component>\n      <p>{{childrenMsg}}</p>\n    </div>\n</template>\n\n<script>\n    //import logo from \'../../../static/logo.png\'\n    export default {\n        name: \'parentComponentByemit\',\n          components: {\n            childrenComponentByemit :  () => import(\'../components/childrenComponentByemit\'),\n          },\n        data() {\n            return {\n              childrenName : \'childrenComponentByemit\',\n              childrenMsg : "孩子的消息"\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          updateTitle(msg){\n            this.childrenMsg = 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=\"childrenComponentByemit children0\">\n      <p>子组件</p>\n      \x3c!--{{parentMsg}}--\x3e\n      <button @click=\"btnClick('$emit方式')\">$emit方式</button>\n    </div>\n</template>\n\n<script>\n    //import logo from '../../../static/logo.png'\n    export default {\n        name: 'childrenComponentByemit',\n        components: {\n            //Xgplayer :  () => import('../xgplayer'),\n        },\n        data() {\n            return {\n\n            }\n        },\n        //作为子组件的时候应用父组件的时候设定的变量\n        props: {\n          children : String\n        },\n        //用来观察 方法 对象 变量 有变化 走的回调方法\n        watch: {},\n        //正常方法\n        methods: {\n          btnClick() {\n            //发给监听这个方法的父布局\n            this.$emit(\"titleChanged\",\"子向父组件传值\");//自定义事件  传递值“子向父组件传值”\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 r=e("VU/8")(i,s,!1,function(n){e("9hIH")},"data-v-3fc73cce",null);t.default=r.exports}});
//# sourceMappingURL=8.31d3bff9a763e0c99f1e.js.map