Vue学习计划-Vue2--Vue组件（二）多文件组件

新茶十九

已于 2023-12-08 09:16:58 修改

阅读量606

点赞数 13

分类专栏： # vue2 学习路程文章标签： vue.js 学习 javascript

于 2023-12-06 09:47:33 首次发布

本文链接：https://blog.csdn.net/qq_35940731/article/details/134823089

版权

vue2 学习路程专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1 多文件组件：一个文件中包含多个组件

组件步骤

第一步：定义

 const school = Vue.extend({
  template:`<div>{{schoolName}}</div>`,
  data(){
    return {
      schoolName: '美丽的学校'
    }
  }
})
// extend可以省略
const student = {
  template: `<h2>{{ studentName }}</h2>`,
   data(){
     return {
       studentName: '小斯白'
     }
   }
 }

第二步：注入

 components:{
    school: school,
    student
  },

第三步：引用

注意
1. html文件中自闭和组件 <ss /> 形式，否则不往下执行, 要写全<ss></ss>
2. 多个单词的组件名称，组件注入时 不可以使用小驼峰，最好使用kebab-case命名
```
new Vue({
    el: "#app",
    data:{
    },
    components:{
        'big-school': school,
        student
    },
})
```
全局注册：

Vue.component('student', {
    template: `<h2>{{ studentName }}</h2>`,
    data(){
    return {
        studentName: 'sss'
    }
    }
})

示例：

	<!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="vue.js"></script>
	</head>
	<body>
	    <div id="app">
	        <!-- html文件中不要自闭和组件 <组件 /> 形式，否则不往下执行-->
	        <!-- <big-school/> -->
	        <!-- <bigSchool></bigSchool> -->
	        <big-school></big-school>
	        <hr>
	        <student></student>
	        <student></student>
	        <student></student>
	        <my-class></my-class>
	    </div>
	    <hr>
	    <!-- 另一个容器，用来测试全局组件 -->
	    <div id="root">
	        <my-class></my-class>
	    </div>
	    <script>
	        // 1. 定义组件
	        const school = Vue.extend({
	            // name可以控制vue开发工具中显示的组件名
	            // name: 'xuexiao',
	            template:`
	            <div>
	                <p> 学校的名称： {{ schoolName }}</p>
	                <p> 学校的名称： {{ schoolAdress }}</p>
	            </div>
	            `,
	            data(){
	                return {
	                    schoolName: '美丽的学校',
	                    schoolAdress: '祖国',
	                }
	            }
	        })
	        // 定义组件： 简写
	        const student = {
	            name: 'xuesheng',
	            template:`
	            <div>
	                <p> 学生的名称： {{ studentName }}</p>
	                <p> 学生的年龄： {{ studentAge }}</p>
	            </div>
	            `,
	            data(){
	                return {
	                    studentName: '张三',
	                    studentAge: 22
	                }
	            }
	        }
	        // 全局组件定义
	        Vue.component('my-class', {
	            template:`
	            <div>
	                <p> 我的名称： {{ myName }}</p>
	                <button @click="clickEvent">点击操作</button>
	            </div>
	            `,
	            data(){
	                return {
	                    myName: '我的名字',
	                }
	            },
	            methods: {
	                clickEvent(){
	                    console.log(1111)
	                }
	            },
	
	        })
	        const vm = new Vue({
	            el: "#app",
	            data:{
	            },
	            // 2. 注册组件
	            components:{
	                // 推荐使用kebab-case命名
	                // bigschool: school,
	                'big-school': school,
	                student
	            },
	        })
	        new Vue({
	            el: "#root"
	        })
	    </script>
	</body>
	</html>

补充一点关于组件的案例，template模板使用组件，案例如下：

	<!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="./vue.js"></script>
	</head>
	<body>
	  <div id="app">
	      <!-- 里面可以什么都不写，只做一个模板容器 -->
	      <!-- <school></school> -->
	      <!-- <student></student> -->
	  </div>
	  <script>
	    const school = {
	      template:`<div>学校名称：{{ schoolName }}</div>`,
	      data(){
	        return {
	          schoolName: '美丽的学校'
	        }
	      }
	    }
	    const student = {
	      template:`<div>学校名称：{{ studentName }}</div>`,
	      data(){
	        return {
	          studentName: '江小白'
	        }
	      }
	    }
	    new Vue({
	      el: "#app",
	      template: `
	      <div>
	        <school/>
	        <student></student>  
	      </div>
	      `,
	      data:{
	        name: '小白' 
	      },
	      components:{
	        school,
	        student
	      }
	    })
	  </script>
	</body>
	</html>