Vue 学习笔记-2022/12/07

一、如何创建组件

const app = Vue.createApp({});

app.component("WordCount", {
  data() {
    return {
      content: "",
    };
  },
  computed: {
    count() {
      return this.content.length;
    },
  },
  template: `
    
你共输入了 {{ count }} 个字符
  `,
});

const vm = app.mount("#app");

二、如何创建全局组件

const app = Vue.createApp({});

app.component("WordCount", {
  data() {
    return {
      content: "",
    };
  },
  computed: {
    count() {
      return this.content.length;
    },
  },
  template: `
    
你共输入了 {{ count }} 个字符
  `,
});

app.component("WordCountApp", {
  template: `
字符统计应用
`,
});

const vm = app.mount("#app");

三、局部组件注册

需要在对应的组件里面导出 JS 对象

然后再 index.js 导入对应的组件

// ComponentA.js
// 导出
export default {
  template: `
我是组件 A
`,
};

// 导入
import ComponentA from "./components/ComponentA.js";

const app = Vue.createApp({
  components: {
    ComponentA, // 等价于 ComponentA: ComponentA
    ComponentC,
  },
});
const vm = app.mount("#app");