如何在 Vue3 中使用组件？

1. 创建组件
   • 函数式组件：
     • 函数式组件是一个简单的 JavaScript 函数，它接收props（属性）作为参数并返回一个虚拟 DOM 节点。例如，创建一个简单的HelloWorld函数式组件：

       import { h } from 'vue';
       const HelloWorld = (props) => {
         return h('div', `Hello, ${props.name}!`);
       };

     • 这里使用了h函数（它是createVNode的别名）来创建一个<div>元素，元素的内容是根据传入的props.name属性动态生成的。
     • 选项式组件：
       • 选项式组件是一个包含多种选项的对象。例如，创建一个MyComponent选项式组件：
     •  

       收起

        

       javascript

       复制

       const MyComponent = {
         data() {
           return {
             count: 0
           };
         },
         template: '<div @click="increment">{
                
                { count }}</div>',
         methods: {
           increment() {
             this.count++;
           }
         }
       };
       

     • 在这个组件中，data函数返回组件的数据对象，template定义了组件的模板，methods中定义了组件的方法。当用户点击<div>元素时，会调用increment方法，使count的值加 1。
     • 注册组件
       • 全局注册：
         • 可以在应用（app）级别进行全局注册。假设已经有一个Vue应用app，要全局注册上述的HelloWorld组件：
     •  

       收起

        

       javascript

       复制

       import { createApp } from 'vue';
       const app = createApp({});
       app.component('Hello-World', HelloWorld);
       

     • 注册后，在应用的任何地方都可以使用<Hello - World>标签来引用这个组件。component方法的第一个参数是组件的名称（注意这里使用了连字符命名法，在 HTML 中使用时要按照这种格式），第二个参数是组件本身。
     • 局部注册：
       • 在一个组件内部进行局部注册。例如，在一个父组件中使用局部注册来使用MyComponent：
     •  

       收起

        

       javascript

       复制

       import { defineComponent } from 'vue';
       import MyComponent from './MyComponent.vue';
       const ParentComponent = defineComponent({
         components: {
           'my-component': MyComponent
         },
         template: '<my - component></my - component>'
       });
       

     • 这里通过defineComponent函数定义了ParentComponent，在components选项中进行了局部注册。注册后的组件名称是my - component（注意这里命名要符合 HTML 标签命名规范），然后在template中就可以使用这个组件了。
     • 使用组件
       • 无论是全局注册还是局部注册的组件，使用方式类似。在模板中，使用组件的标签名来插入组件。例如，在一个 HTML 模板中使用全局注册的Hello - World组件：

     • 复制

       <div id="app">
         <Hello - World name="Vue3"></Hello - World>
       </div>
       

     • 当组件被渲染时，会根据组件的定义生成相应的 DOM 结构。在函数式组件HelloWorld的例子中，会生成一个包含Hello, Vue3!文本的<div>元素。
     •  

       收起

        

       html