Vue3学习心得4-组件

创建组件

创建组件分为三步

1. 创建

构造一个配置对象。

const content = {
    name:'content',
    data:function() {
        return{
            name: "张三",
            age: 18,
            sex: "male"
        }
    },
    methods: {
        changeSex:function() {
            this.sex = !this.sex
        }
    },
    template: `
        <p>学生：{{name}}</p>
        <p>{{age}}</p>
        <p v-if="sex">male</p>
        <p v-else>female</p>
        <button @click="changeSex()">变性</button>
    `
};

2. 注册

• 全局注册

const school = Vue.createApp({});
school.component('label',content);

3. 使用

嵌套组件

• 局部注册

在配置对象content中加入

components: {
    component:component //可缩写为component,其中值component为另一个配置对象
},

注意

Vue.defineComponent()与直接构造配置对象的效果是相同的，只是前者更规范

组件的意义