| 12 |
- 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
|
