Vue 学习笔记-2022/12/07

一、如何创建组件
const app = Vue.createApp({});

app.component("WordCount", {
  data() {
    return {
      content: "",
    };
  },
  computed: {
    count() {
      return this.content.length;
    },
  },
  template: `
    <div>
      <input v-model="content" />
      <p>你共输入了 {{ count }} 个字符</p>
    </div>
  `,
});

const vm = app.mount("#app");
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="lib/vue.global.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>如何创建组件</title>
</head>

<body>
  <div id="app">
    <div>
      <word-count></word-count>
      <word-count></word-count>
      <word-count></word-count>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>
二、如何创建全局组件
const app = Vue.createApp({});

app.component("WordCount", {
  data() {
    return {
      content: "",
    };
  },
  computed: {
    count() {
      return this.content.length;
    },
  },
  template: `
    <div>
      <input v-model="content" />
      <p>你共输入了 {{ count }} 个字符</p>
    </div>
  `,
});

app.component("WordCountApp", {
  template: `<div>
    <h1>字符统计应用</h1>
    <WordCount />
  </div>`,
});

const vm = app.mount("#app");
三、局部组件注册

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

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

// ComponentA.js
// 导出
export default {
  template: `<p>我是组件 A</p>`,
};
// 导入
import ComponentA from "./components/ComponentA.js";

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

本文标题: Vue 学习笔记-2022/12/07

本文链接: https://dnslin.com/archives/78.html

除非另有说明,本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

声明:转载请注明文章来源。

最后修改:2022 年 12 月 08 日
如果觉得我的文章对你有用,请随意赞赏