CSDN|查漏补缺！这份 VUE 学习知识总结请注意查收！

【CSDN|查漏补缺！这份 VUE 学习知识总结请注意查收！ | 原力计划】
本文插图
（2）全局组件第一个参数为组件的名称，我在这里定义了一个 comp4 的组件“ ，第二个参数为一个对象。 template 模板内容只能有一个根元素(div) 。 Vue.component('comph4', { template: '<div><h4>这是一个h4标题</h4></div>'})以上方法在输入模板内容时在编辑器内无任何智能提示,所以我将 template 模板内容放在外面。 template 我给他传递一个ID 选择器 cmp4 ，并在外部通过 template 标签定义模板内容。 <template id="cmp4"> <div> <h4>这是一个h4标题</h4> </div></template><script> Vue.component('comph4', { template: '#cmp4'})</script>（3）私有组件下面这个 copmh4 就只能在 app1 下面调用，我还是使用了将模板内容放在外部的方法。 var vm = new Vue({ el:'#app1', data:{}, methods:{}, components:{ comph3:{ template:'#cmp3' } }})3、组件的调用组件调用就和写 html 标签一样,comp4 组件就可以在全局中调用，而 cmp3 只能在 app1 中调用：<body> <comp4><comp4> <div id="app1"> <comp3><comp3> </div> <template id="cmp4"> <div> <h4>这是一个h4标题</h4> </div> </template> <template id="cmp3"> <div> <h3>这是一个h3标题</h3> </div> </template></body>4、组件中的其他知识（1）data 的不同组件和实例一样也可以拥有自己的data数据和 methods 方法，和实例中 data不同的是，组件中的 data 必须为一个函数，且这个函数必须返回一个对象。 Vue.component('comph4', { template: '#cmp4', data: function{ return{ msg：'msg这是组件中data中的数据' } }, methods:{}})（2）组件的切换eg：在 VUE 实例的 data 中定义一个变量通过同过点击不同的按钮给 data 变量赋不同的值，根据不同的值来选择显示哪个组件。 <div id="app1"> <input type="button" value="http://news.hoteastday.com/a/cmph3" @click="iscom='comph3'"> <input type="button" value="http://news.hoteastday.com/a/cmph4" @click="iscom='comph4'"> <component :is="iscom"></component></div>var vm = new Vue({ el:'#app1', data:{ iscom:''}})（3）父子组件之间的传值原理：父组件在引用子组件的时候通过属性绑定，将父组件的数据绑定给子组件，绑定方法通过事件绑定。注意：必须将绑定的属性在子组件的 props 数组中定义一下，且父组件传过来的值是可读的，组件自己 data 里的数据是可读可写的。通过属性绑定将父组件的 msg 传给子组件，并且通过事件绑定，将 show 方法传递给子组件，子组件在接收父组件的值时，在 props 数组中定义。子组件传递给父组件通过==$emit==,第一个参数为绑定事件的名称，第二个参数为要传递的值，如果只是父组件向子组件传递方法，则不必传递第二个参数。说白了子组件向父组件传值，其实就是父组件向子组件传递方法的同时接收子组件反馈过来的数据罢了。 <div id="app1"> <comph4 :fromParent="msg" @fun="show"></comph4></div>var vm = new Vue({ el:'#app1', data:{ msg:'我是父组件中的msg', fromSon:null }, methods:{ show(data){ //父组件的show方法接收一个参数 this.fromeSon=data; //将从子组件接收过来的data赋值给父组件的fromSon } } compents:{ comph4:{ template:'<div> <h4>我是一个h4---{{fromParent}}</h4> <input type="button" value="http://news.hoteastday.com/a/调用父组件中的方法" @click=”myclick“> </div>' ，props:['fromParent'], data:function{ return { data:{name:'orange',age:18} } }, methods:{ myclick{ this.$emit('fun',this.data) //将子组件中的data传递给父组件 } } } }})版权声明：本文为CSDN博主「新鲜的橘子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。你点的每个“在看” ，我都认真当成了喜欢

CSDN|查漏补缺！这份 VUE 学习知识总结请注意查收！ | 原力计划( 三 )

推荐阅读

为啥女明星粉丝不肯放过杨幂

女大学生一个月生活费2000应该要怎样分配，才能使自己着装有一定品味，并且还能丰富生活

九游网|天谕手游怎么摆摊赚钱摆摊交易有什么技巧

脸上的斑要怎么去掉脸上的斑可以淡化吗

如果手机里只能留一个类似携程，阿里旅行，去哪儿这之类的APP，应该用哪个

特朗普给普京三封信曝光|特朗普给普京三封信曝光三封信具体什么内容？

轻奢科技范1999元这个价格对标红米K30如何？，荣耀X10价格曝光

AutoR智驾|EV和理想ONE的热卖，看清市场对新能源汽车的需求，从五菱宏光MINI

男人正常多久(男人坚持几分钟算正常)

抗清义士，闽海才子，明末黄道周

姨太少女心|杨幂，张译，汤唯，许凯，马天宇

[天空迷彩]英感慨白宫代价惨重，俄：这一天终于到来，中东13国一致拒绝美国

湖北省|怎么看待日益庞大的蹲考族？

牛市|将上行！北向资金重仓的10只优质科技股（名单），未来可期

金吾财经|股价随市曾跌4%，【次新异动】业绩与股价走反向！网易二季度净利45亿元表现良好

每日谈资|郭麒麟实力证明学识比学历强，“十项全能”藏不住了！

自制豆浆的做法步骤豆浆怎么做

穿搭|一周男星穿搭丨能把“高定”穿出中国风的男人也是没谁了

中国三八妇女节的由来故事中国三八妇女节的由来

树枝竟能泡水喝，好处还特别多