vue3 组件注册

一位美女 lv.1

发布时间：2023-08-23 09:00:40 312

组件和组件复用

<div id="vm">
 <button-counter></button-counter>
 <button-counter></button-counter>
 </div>
 <script>

 const app = Vue.createApp({});
 app.component('button-counter', {
 data() {
 return {
 count: 0
 }
 },
 template: `<button @click="count++">次数：{{count}}</button>`
 });
 vm = app.mount('#vm');
 </script>

组件注册

1.组件名规范

推荐W3C规范：字母全小写且必须包含一个连字符

2.全局注册

通过app.component来直接创建组件

<div id="vm">
 <button-a></button-a>
 <button-b></button-b>
 <button-c></button-c>
 </div>
 <script>
 const app = Vue.createApp({});
 app.component('button-a', { template: `<button>aaa</button>`});
 app.component('button-b', { template: `<button>bbb</button>`});
 app.component('button-c', { template: `<button>ccc</button>`});
 vm = app.mount('#vm');
 </script>

3.局部注册

app.component引用其他文件

<div id="vm">
 <button-a></button-a>
 <button-b></button-b>
 </div>
 <script type="module">
 import * as obj from './main.js'
 const app = Vue.createApp({
 components: {
 'button-a': obj.btn1,
 'button-b': obj.btn2
 }
 });
 const vm = app.mount('#vm');
 </script>

main.js

const btn1 = { template: `<button>aaa</button>` }

const btn2 = { template: `<button>bbb</button>` }

export {btn1,btn2}

4.子组件

5.在局部组件中导入组件

文章来源： https://blog.51cto.com/u_13854953/5922304

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。