Vue组件化编程以及组件关系

最新推荐文章于 2023-01-06 19:47:41 发布

Machoul

最新推荐文章于 2023-01-06 19:47:41 发布

阅读量271

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_34932086/article/details/123820932

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue组件化编程和原型对象

组件的基本使用

使用组件的三个步骤：

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

定义组件

通过使用Vue.extend（options）来创建组件，组件中options不应该拥有el属性，因为最终所有的组件都要经过一个VM来管理，由VM中的el决定服务哪个容器。

data必须写成函数，避免组件被复用时，数据存在引用关系。

const person = Vue.extend({
  template: `
				<div>
					<h2>姓名：{{name}}</h2>
					<h2>年龄：{{age}}</h2>
				</div>
			`,
  data() {
    return {
      name: 'machoul',
      age: 18
    }
  }
})

注册组件

注册组件的方式又两种，第一种是通过components选项来注册，第二种是通过全局配置来注册组件

通过components来注册

new Vue({
  el: '#context',
  data: {
    msg: '你好啊！'
  },
  //注册组件
  components: {
    person
  }
})

通过全局配置来注册

Vue.component('person', person)

使用组件

通过组件标签的形式来使用组件,不用使用脚手架时，<person/>会导致后续组件不能渲染。

<div id="context">
  <person></person>
</div>

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="context">
		</div>
	</body>

	<script type="text/javascript">
		//定义locations组件
		const locations = Vue.extend({
			name:'locations',
			template:`
				<div>
					<h2>地名：{{name}}</h2>	
					<h2>地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'杭州',
					address:'西湖'
				}
			}
		})
		
		//定义word组件
		const word = Vue.extend({
			name:'word',
			template:`
				<div>
					<h2>名称：{{name}}</h2>	
					<locations></locations>
				</div>
			`,
			data(){
				return {
					name:'地球'
				}
			},
			components:{
				locations
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'今天天气挺好的'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<word></word>
				</div>
			`,
			components:{
				hello,
				word
			}
		})

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

组件实例对象

组件实例对象就是VueComponent，每次调用Vue.extend，返回的都是一个全新的VueComponent!

关于this的指向问题：

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

原型对象

创建构造函数person

function Person(name, age) {
  this.name = name;
  this.age = age;
}

给构造函数的显示原型属性对象添加一个值，实例可以直接读取到

var person1 = new Person('machoul',10);
Person.prototype.sex = '男'; 
console.log(person1.sex) //男

构造函数的显式原型属性和实例的隐式原型属性指向同一个对象

var person1 = new Person('machoul',10);
console.log(Person.prototype)
console.log(person1.__proto__)
console.log(Person.prototype === person1.__proto__)//ture

Vue的内置关系

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="context">
        <hello></hello>
    </div>
</body>

<script type="text/javascript">
    Vue.prototype.x = 100

    //定义hello组件
    const hello = Vue.extend({
        name: 'hello',
        template: `
				<div>
					<h2>名称：{{name}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
        data() {
            return {
                name: 'machoul'
            }
        },
        methods: {
            showX() {
                console.log(this.__proto__.__proto__ === Vue.prototype)
                console.log(this.x)
            }
        },
    })

    //创建一个vm
    const vm = new Vue({
        el: '#context',
        data: {
            msg: '你好'
        },
        components: { hello }
    })

</script>

</html>

配合脚手架实现单文件组件

index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

Main.js

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

APP.vue

<template>
	<div>
		<Hello></Hello>
	</div>
</template>

<script>
	//引入组件
	import Hello from './Hello.vue'

	export default {
		name:'App',
		components:{
			Hello
		}
	}
</script>

Hello.vue

<template>
	<div class="hello-content">
		<h2>名称：{{name}}</h2>
		<h2>年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Hello',
		data(){
			return {
				name:'machoul',
				age:18
			}
		},
		methods: {
		}
	}
</script>

<style>
	.hello-content{
		background-color: pink;
	}
</style>