Vue非单文件组件component的基本使用

Ejing6747

已于 2022-09-11 21:39:21 修改

阅读量194

点赞数

分类专栏： VUE基础文章标签： vue.js 前端 javascript

于 2022-09-09 18:22:31 首次发布

本文链接：https://blog.csdn.net/LIUYJ520/article/details/126787686

版权

VUE基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!--
		Vue中使用组件的三大步骤：
				一、定义组件(创建组件)
				二、注册组件
				三、使用组件(写组件标签)
		一、如何定义
					使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
					区别如下：
							1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
							2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
					备注：使用template可以配置组件结构。
		二、注册组件
						1.局部注册：new Vue的时候传入components选项
						2.全局注册：Vue.component('组件名',组件)
		三、编写组件：
						<school></school>

–>

<body>
    <div id="root">
      <h2>{{hello}}</h2>
      <hr />
      <!-- 3.使用组件 -->
      <school></school>
      <hr />
      <student></student>
    </div>

    <div id="root2">
      <!-- 全局注册过的组件 -->
      <school>/school>
      <hr />
      <!-- 未全局注册过的组件 ，不能使用-->
      <student></student>
    </div>
  </body>
  <script text="text/javascript">
    //1.创建学校组件
    //关键函数extend(),html结构包含在template中
    const school = Vue.extend({
      template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校名称：{{schoolAddress}}</h2>
        </div>
        `,
      //主键由vm管理，不需要写el,data写成函数的形式
      data() {
        return {
          schoolName: "家里蹲大学",
          schoolAddress: "深渊峡谷",
        };
      },
    });
    //1.创建学生组件
    const student = Vue.extend({
      template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{studentAge}}</h2>
        </div>
        `,
      data() {
        return {
          studentName: "张三",
          studentAge: 18,
        };
      },
    });

    //2.全局注册组件
    Vue.component("school", school);

    new Vue({
      el: "#root",
      data: {
        hello: "哔站欢迎你",
      },
      //2.局部注册组件
      //关键键名：components
      components: {
        school,
        student,
      },
    });
    new Vue({
      el: "#root2",
    });
  </script>
</html>