Vue2进阶篇-scoped样式、组件自定义事件

Vue2基础全套教程合集：点击跳转        Vue2高级全套教程合集：点击跳转

---

一、Scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

<template>
    <div class="demo">
        <h2 class="title">学生姓名：{{ name }}</h2>
        <h2 class="atguigu">学生性别：{{ sex }}</h2>
    </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: '张三',
            sex: '男'
        }
    }
}
</script>
<!-- lang可以设置style的语言 -->
<style lang="less" scoped>
.demo {
    background-color: pink;

    .atguigu {
        font-size: 40px;
    }
}
</style>

二、组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

   2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.xxx.$on('atguigu',this.test)
      }
      

   3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4. 触发自定义事件：this.$emit('atguigu',数据)

5. 解绑自定义事件

   1. this.$off('atguigu') 解绑一个
   2. this.$off([事件名,事件名]) 解绑多个
   3. this.$off() 解绑所有

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

• 代码示例：给组件绑定自定义事件，通过$emit触发

App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<Student @atguigu="getStudentName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- Vue2中，当需要在组件本身添加Vue原生事件时，需要在事件后加.native修饰符 -->
		<Student ref="student" @click.native="show"/> 
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			
			// 绑定自定义事件 (第一种写法，需要methods定义方法，推荐！！！)
			// 直接通过refs获取student的vc对象，通过$on绑定事件。
			this.$refs.student.$on('atguigu',this.getStudentName) 

			// 绑定自定义事件 (第二种写法，无需在methods定义方法)
			// function的this指向为被调用的组件，()=>箭头函数没有this指向，默认向外查找this
			this.$refs.student.$on('atguigu2',function (name,...params) {  
				// 当使用function函数体时，函数体内的this指向是"谁调用就是谁"，atguigu2是Student组件调用，所以this为Student的vc对象
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			})
			
			// 绑定自定义事件（一次性写法）
			this.$refs.student.$once('atguigu3',this.getStudentName) 
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑atguigu事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件，第二个参数以后都为传参。
				this.$emit('atguigu',this.name,666,888,900)
			},
			unbind(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				// 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
				this.$destroy() 
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

• 代码示例：通过props读取方法，触发自定义事件

App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>
	</div>
</template>

<script>
	import Student from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

School.vue

<template>
	<div class="school">
		<button @click="sendSchoolName">把学校名给App</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		props:['getSchoolName'],
		data() {
			return {
				name:'阿伟',
			}
		},
		methods: {
			sendSchoolName(){
				this.getSchoolName(this.name)
			}
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通