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");
最后修改:2023 年 10 月 05 日
如果觉得我的文章对你有用,请随意赞赏