Vue2基础-Vue2中非单页面组件、组件嵌套、VueComponent详解（HTML版）

大脑不能为空

已于 2022-07-06 15:06:46 修改

阅读量720

点赞数 1

分类专栏： Vue2-Vue3全套学习教程文章标签：前端 javascript vue.js 前端框架 html

于 2022-07-05 15:42:21 首次发布

本文链接：https://blog.csdn.net/qq_33399435/article/details/125619964

版权

Vue2-Vue3全套学习教程专栏收录该内容

41 篇文章 14 订阅

订阅专栏

一、Vue2组件的基本使用

1. Vue中使用组件的三大步骤 *

定义组件(创建组件)
注册组件
使用组件(写组件标签)

2. 如何定义一个组件？

使用Vue.extend(options) 创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

el不要写，为什么？ ———— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

3. 如何注册组件？

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)

4. 几个注意点

关于组件名:
1. 一个单词组成：
  1. 第一种写法(首字母小写)：school
  2. 第二种写法(首字母大写)：School
2. 多个单词组成：
  1. 第一种写法(kebab-case命名)：my-school
  2. 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
3. 备注：
  1. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
  2. 可以使用name配置项指定组件在 开发者工具（Vue Devtools） 中呈现的名字。
关于组件标签:
1. 第一种写法：<school></school>
2. 第二种写法：<school/>
3. 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

案例演示：

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <hello></hello>
        <hr>
        <h1>{{msg}}</h1>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <hr>
        <class-room></class-room>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    // 创建教室组件
    const ClassRoom = Vue.extend({
        template: `
			<div>
				<h2>{{roomId}}</h2>
				<h2>{{roomName}}</h2>
			</div>
		`,
        data() {
            return {
                roomId: '2-201',
                roomName: '红波楼'
            }
        },
        methods: {

        }
    })

    //第一步：创建school组件
    const school = Vue.extend({
        template: `
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template: `
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })

    //第一步：创建hello组件
    const hello = Vue.extend({
        template: `
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
        data() {
            return {
                name: 'Tom'
            }
        }
    })

    //第二步：全局注册组件
    Vue.component('hello', hello)

    Vue.component('class-room', {
        template: `
			<div>
				<h2>{{roomId}}</h2>
				<h2>{{roomName}}</h2>
			</div>
		`,
        data() {
            return {
                roomId: '2-201',
                roomName: '红波楼'
            }
        },
        methods: {

        }
    })

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

二、组件的嵌套

嵌套组件就是将组件标签写入创建组件时的template模板中。

<body>
    <!-- 准备好一个容器-->
    <div id="root">

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //定义student组件
    const student = Vue.extend({
        name: 'student',
        template: `
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                age: 18
            }
        }
    })

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        //注册组件（局部）
        components: {
            student
        }
    })

    //定义hello组件
    const hello = Vue.extend({
        template: `<h1>{{msg}}</h1>`,
        data() {
            return {
                msg: '欢迎来到尚硅谷学习！'
            }
        }
    })

    //定义app组件
    const app = Vue.extend({
        template: `
			<div>	
				<hello></hello>
				<school></school>
			</div>
		`,
        components: {
            school,
            hello
        }
    })

    //创建vm
    new Vue({
        template: '<app></app>',
        el: '#root',
        //注册组件（局部）
        components: {
            app
        }
    })
</script>

三、关于VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
特别注意*：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
关于this指向：
1. 组件配置中：
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是 【VueComponent实例对象】。
2. new Vue(options)配置 中：
  data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是 【Vue实例对象】。
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<school></school>
		<hello></hello>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	//定义school组件
	const school = Vue.extend({
		name:'school',
		template:`
			<div>
				<h2>学校名称：{{name}}</h2>	
				<h2>学校地址：{{address}}</h2>	
				<button @click="showName">点我提示学校名</button>
			</div>
		`,
		data(){
			return {
				name:'尚硅谷',
				address:'北京'
			}
		},
		methods: {
			showName(){
				console.log('showName',this)
			}
		},
	})

	const test = Vue.extend({
		template:`<span>atguigu</span>`
	})

	//定义hello组件
	const hello = Vue.extend({
		template:`
			<div>
				<h2>{{msg}}</h2>
				<test></test>	
			</div>
		`,
		data(){
			return {
				msg:'你好啊！'
			}
		},
		components:{test}
	})


	// console.log('@',school)
	// console.log('#',hello)

	//创建vm
	const vm = new Vue({
		el:'#root',
		components:{school,hello}
	})
</script>

四、一个重要的内置关系 *

VueComponent.prototype.__proto__ === Vue.prototype

问题：为什么要有这个关系？

让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <school></school>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.prototype.x = 99 // 在Vue原型上添加一个x属性，并赋值99

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showX() {
            	// 在组件中可以拿到x属性值。
                console.log(this.x)
            }
        },
    })

    //创建一个vm
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '你好'
        },
        components: {
            school
        }
    })
</script>