3 Vue3.0 脚手架&组件(核心概念FH)

Until2028

已于 2022-09-08 16:57:08 修改

阅读量600

点赞数

分类专栏： Vue3.0X 文章标签： vue.js 前端 javascript

于 2022-08-10 22:28:27 首次发布

本文链接：https://blog.csdn.net/harvestUachieve/article/details/126257424

版权

1 什么是Vue组件?

组件
组件是什么：组件就是自定义标签，他是vue中核心功能之一，是把页面当中的可以重复使用的内容进行封装，方便调用

全局组件
作用域：在所有实例中都可以使用

语法：Vue.component:{"组件名不能喝现有的html标签重名",{

template:"<div></div>"

}

注意

在HTML 模板中使用组件时，首字母大写的形式只能在 template 配置项中的 HTML 代码中使用，或者在后面要讲的单文件组件的 HTML 中使用。
如果在像 index.html 这种纯html 文件中使用组件时，必须使用小写单词+短横线的形式。
定义名字的时候尽量使用两个或以上的单词，以免跟原生的 HTML标签名冲突。

2 创建一个Vue组件

html:

 <div id="app">
      <div>
        <word-count></word-count>
        <word-count></word-count>
        <word-count></word-count>
      </div>
    </div>

js:

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");

3 全局注册组件

html:

<div id="app">
      <div>
        <word-count-app />
      </div>
    </div>

js:

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");

4 局部注册组件

作用域只有当前vue对象
使用import 导入能缩小打包体积,只打包引入的文件

html:

   <title>局部注册组件</title>
  </head>
  <body>
    <div id="app">
      <div>
        <component-a></component-a>
        <component-c></component-c>
      </div>
    </div>
    <script src="index.js" type="module"></script>
    <!-- type="module"  才能生效 -->
  </body>

ComponentA.js

export default {
  template: `<p>我是组件 A</p>`,
};

ComponentC.js

import ComponentB from "./ComponentB.js";
export default {
  template: `<p>我是组件 C</p><ComponentB />`,
  components: { ComponentB },
};

js:

// 示例：局部注册组件
import ComponentA from "./components/ComponentA.js";
import ComponentC from "./components/ComponentC.js";

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

在真实开发过程中不太试用上述全局局部组件的创建引入方式 ,一般采用Vue 脚手架来进行引入