全局组件注册语法
components中的两个参数组件名称和组件内容
Vue.component(组件名称, { data: 组件数据, template:组件模板内容 })
全局组件注册应用
组件创建:
Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button>', methods: { handle: function(){ this.count ++; } } }) var vm = new Vue({ el: '#app', data: { } });
如何在页面中运用,直接在页面中应用组件名称
<div id="app"> <button-counter></button-counter> </div>
这个组件是可以重用的,直接在页面中多次使用,切数据相互独立,互不干扰
组件注册注意事项
1.data必须是一个函数
- 分析函数与普通对象的对比
2.组件模板内容必须是单个根元素
- 分析演示实际的效果
3.组件模板内容可以是模板字符串
- 模板字符串需要浏览器提供支持(ES6语法)
4.组件命名方式
- 短横线方式
Vue.component('my-component',{/*...*/})
驼峰方式
Vue.component('MyComponent',{/*...*/})
如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件
局部组件
局部组件只能在注册它的父组件中使用
局部组件注册语法
var ComponentA = {/*...*/} var ComponentB = {/*...*/} var ComponentC = {/*...*/} new Vue({ el : '#app', components: { 'component-a' : ComponentA, 'component-b' : ComponentB, 'component-c' : ComponentC } })
组件的创建
Vue.component('test-com',{ template: '<div>Test<hello-world></hello-world></div>' }); var HelloWorld = { data: function(){ return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }; var HelloTom = { data: function(){ return { msg: 'HelloTom' } }, template: '<div>{{msg}}</div>' }; var HelloJerry = { data: function(){ return { msg: 'HelloJerry' } }, template: '<div>{{msg}}</div>' }; var vm = new Vue({ el: '#app', data: { }, components: { 'hello-world': HelloWorld, 'hello-tom': HelloTom, 'hello-jerry': HelloJerry } });
页面中的应用
<div id="app"> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div>
以上就是Vue 组件注册全解析的详细内容,更多关于Vue 组件注册的资料请关注其它相关文章!
标签:
Vue,组件注册,vue,组件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue 组件注册全解析”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
20240518
20240518
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 【爵士乐】VA-2024-ParamountJazzLoungeChillingExperience(FLAC)
- 群星《离歌 网剧原声带》[320K/MP3][249.78MB]
- 群星《离歌 网剧原声带》[FLAC/分轨][538.53MB]
- 群星《承欢记 电视剧影视原声带》[320K/MP3][109.99MB]
- 【欧美乡村】JohnnyLee-2024-13thOfJulyandEmotions(FLAC)
- 【流行爵士】PattiAustin-2024-LoveSongs(FLAC)
- 【爵士乐】VA-2024-SupremeLoungeChillSelectionJazzyVibeTunes(FLAC)
- 群星《承欢记 电视剧影视原声带》[FLAC/分轨][219.8MB]
- 群星《乘风2024 第1期》[320K/MP3][110.09MB]
- 群星《乘风2024 第1期》[FLAC/分轨][322.4MB]
- 【古典音乐】卡拉扬《莫扎特·魔笛(全剧)》2CD.2015[FLAC+CUE整轨]
- Yurika《ただいま》【Hi-Res】24bit-96kHz【flac】