7.vue基础（六）非单文件组件-单文件组件

最新推荐文章于 2023-07-26 12:10:28 发布

必须午睡的xue薇

最新推荐文章于 2023-07-26 12:10:28 发布

阅读量505

点赞数

分类专栏：前端-vue 文章标签： html5 vue.js javascript 前端框架

本文链接：https://blog.csdn.net/qq_41634943/article/details/124695916

版权

前端-vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1.非单文件组件
2.单文件组件

1.非单文件组件

1.1 基本使用

Vue中使用组件的三大步骤：

1.1.1 定义组件(创建组件)

	const name = Vue.extend({
        
    	}
    )

注意事项：

(1)里面可以写template(vm里也可以写)，但是注意里面必须有一个根节点，也就是必须先写一个div。

(2)组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。

(3)data必须写成函数,也就是如下，因为避免组件被复用时，数据存在引用关系。

		data() {
			return {     
			}
		},

(4)里面照样可以跟vm一样写函数方法，外面也可以调用

	const name = Vue.extend({
		template: `
				<div class="demo">
					<h2>秦燕燕身高：{{height}}</h2>
					<h2>秦燕燕体重：{{weight}}</h2>
					<button @click="showHeight">点我提示秦燕燕身高</button>	
				</div>
			`,
		// el:'#root', 不可写
		data() {
			return {
				height: '160',
				weight: '55'
			}
		},
		methods: {
			showHeight() {
				alert(this.height)
			}
		},
	})

1.1.2 注册组件

	new Vue({
		el: '#root',
		//注册组件（局部注册）
		components: {
			name1:name//此处简写是name，为了对照我写的是复杂的形式
		}
	})

	//全局注册组件
	Vue.component('name1', name)//

1.1.3 使用组件(写组件标签)

<name1></name1>

1.2 几个注意点

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字(就是如果在创建组件时，指定了name：qinyan,那么即使在vm的components里写了name:name,那么name也不管用，必须写或)

    const s = ({
       name: 'qinyan',
    })

2.关于组件标签:

第一种写法：

<school></school>

第二种写法：

<school/>

备注：不使用脚手架时，会导致后续组件不能渲染,也就是只能渲染一次，后面的不会显示。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = (options)

1.3 组件的嵌套

		//定义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:'s'
				}
			},
			//注册组件（局部），student必须在school的前面
			components:{
				student
			}
		})
        //定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
            //注册组件（局部），school必须在app的前面
			components:{
				school,
			}
		})
        
		//创建vm
		new Vue({
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})

1.4 VueComponent

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

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

即Vue帮我们执行的：new VueComponent(options)。

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

4.关于this指向：

(1).组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

1.5 一个重要的内置关系

在这里插入图片描述

2.单文件组件

从这里开始就要写vue文件了

School.vue

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

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'大连交通',
				address:'大连沙河口'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

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

注意事项：3种写暴露的方法

1.导出：export const school=vue.extend({})，导入import {school} form …

2.导出：export {school},导入import {school} form …

3.导出：export default const school=vue.extend({})，导入import school form …

因为这里vue.extend()可以省略，而且定义变量也可以省略，所以就写成了export default {}，导入import school form …

App.vue

<template>
	<div>
		<School></School>
	</div>
</template>

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

	export default {
		name:'App',
        //注册组件
		components:{
			School
		}
	}
</script>

main.js

import App from './App.vue'//但是这里会报错

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

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>练习一下单文件组件的语法</title>
</head>
<body>
	<!-- 准备一个容器 -->
	<div id="root"></div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="./main.js"></script>
</body>

</html>

必须午睡的xue薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.vue基础（六）非单文件组件-单文件组件

文章目录1.非单文件组件1.1 基本使用1.1.1 定义组件(创建组件)1.1.2 注册组件1.1.3 使用组件(写组件标签)1.2 几个注意点1.3 组件的嵌套1.4 VueComponent1.5 一个重要的内置关系2.单文件组件1.非单文件组件1.1 基本使用 Vue中使用组件的三大步骤：1.1.1 定义组件(创建组件) const name = Vue.extend({ } )注意事项： (1)里面可以写template(vm里也
复制链接

扫一扫