vue-组件定义&&注册&&使用

原创已于 2023-10-09 19:23:16 修改 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-10-08 10:46:16 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vue组件的创建、注册和使用步骤，包括如何定义组件、数据管理和方法，以及局部和全局注册组件的示例。同时提及了组件命名和标签使用注意事项。

vue组件使用的步骤

定义组件
注册组件
使用组件

定义组件

Vue.extend(options)
其中options和new Vue(options)出入的options对象几乎一样，但是也有不同。

创建 el不用写—最终所有组件需要经过一个vm的管理，由vm的el决定服务哪个容器。
data必须写成函数—因为组件复用，数据存在引用关系。

Vue创建组件案例 Vue.extend()创建

<!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" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
  </head>
  
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      <h2>学习Vue组件</h2>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;
    //创建一个vue实例
    new Vue({
      el: "#root",
      data: {
        opacity: 1,
      },
    });

    //定义一个vue组件
    let school = Vue.extend({
      template: `
      <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>	
  </div>
    `,
      data() {
        return {
          schoolName: "希望小学",
          address: "123456@qq.com",
        };
      },
      methods: {
        showName() {
          alert(this.schoolName);
        },
      },
    });
  </script>

</html>

注册组件

局部注册：在new Vue时，传入componnets选项
全局注册:在Vue.component(‘组件名’，组件)

局部注册案例

<script>
	//创建vm
    new Vue({
        el: '#root',
        data: {
            msg:'你好啊！'
        },
        //第二步：注册组件（局部注册）
        components: {
            school: school,
            student: student
            // ES6简写形式
            // school,
            // student
        }
    })
</script>

全局注册案例

    //注册vue组件
    Vue.component('school',school)

使用组件

    <div id="root">
      <h2>{msg}</h2>
      <school></school>
    </div>

使用注意点

组件名

一个单词
首字母小写 school
首字母大写 School
多个单词
kebab-case命名 my-name
CamelCase命名 MyName(需要脚手架支持)

组件标签

（需要使用脚手架，否则导致后续标签无法渲染）

组件定义简写

const school = Vue.extend(options) 可简写为：const school = options