【vue】——vue组件化编程

最新推荐文章于 2024-08-29 20:00:00 发布

雷旭4466

最新推荐文章于 2024-08-29 20:00:00 发布

阅读量75

点赞数

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

本文链接：https://blog.csdn.net/leixu4466/article/details/130377404

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

非单文件组件

基本使用

组件的定义——实现应用中局部功能代码和资源的集合
Vue中使用组件的三大步骤：

定义组件（创建组件）
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
（1）el不要写——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
（2）data必须写成函数——避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
注册组件
（1）局部注册：靠new Vue的时候传入components选项
（2）全局注册：靠Vue.components(‘组件名’,组件)
使用组件（写组件标签）

<div>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <student></student>	
</div>
<script>
	//第一步：创建school组件
	const school = Vue.entend({
		template:`
			<div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
		`,
		data(){
			return {
				schoolName: '尚硅谷',
				address:'北京'
			}
		}
	})
	    // 创建student组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>  
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        })

	// 创建vm
	new Vue({
		el:'#root',
		components:{
			school:school,
			//简写
			student,
		}
	})
</script>

注意点

    几个注意点：
        1.关于组件名：
            一个单词组成：
                第一种写法（首字母小写）：school
                第二种写法（首字母大写）：School
            多个单词组成：
                第一种写法（kebab-case命名）：my-school
                第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
            备注：
                （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
                （2）可以使用name配置项指定组件在开发者工具中呈现的名字

        2.关于组件标签：
            第一种写法：<school></school>
            第二种写法：<school/>
            备注：不使用脚手架时，<school/>会导致后续组件不能渲染

        3.一个简写方式：
            const school = Vue.extend(options) 可简写为：const school = options

组件的嵌套

创建组件的时候添加components属性，在里面注册组件

VueComponent

    关于VueComponent：
        1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

        2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象

        3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

        4.关于this指向：
            （1）组件配置中：
                    data函数、methods中的函数、computed中的函数 它们的this均是【VueComponent实例对象】
            （2）new Vue()配置中：
                    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】

一个重要的内置关系

VueComponent.prototype.proto === Vue.prototype

单文件组件

以school、student组件为例

index.html

<!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>

</head>
<body>
    <div id="root"></div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>

</body>
</html>

App.vue

<template>
//根节点必须写div，否则会报错
	<div>
		<School/>
		<Student/>
	</div>
</template>

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

	export default {
		name:App,
		component:{
			School,
			Student
		}
	}
</script>

School.vue

<template>
	<div>
		<h2>学校名称：{{ schoolName }}</h2>
		<h2>学校地址：{{ address }}</h2>
		<button @click="showName">点我</button>
	</div>
</template>

<script>
	export default {
		name:'school',
		data() {
			return {
				schoolName: '尚硅谷',
				address: '北京'
			}
		},
		methods: {
			showName() {
				alert(this.schoolName)
			}
		}
	}
</script>

<style>
	.demo{
		background-color: orange
	}
</style>

Student.vue

<template>
    <div>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生年龄：{{ age }}</h2>
        <button @click="showName">点我</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name: 'tony',
                age: '22'
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        }
    }
</script>