【Vue】组件定义与使用-组件间通信

1. 组件定义与使用

1.1 vue 文件的组成(3 个部分)

1. 模板页面

<template>
	页面模板
</template>

2. JS 模块对象

<script>
export default {
     
     
	data() {
     
     return {
     
     }},
		methods: {
     
     },
		computed: {
     
     },
		components: {
     
     }
}
</script>

3. 样式

<style>
	样式定义
</style>

1.2 基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

<template>
	<HelloWorld></HelloWorld>
	<hello-world></hello-world>
</template>
<script>
	import HelloWorld from './components/HelloWorld'
	export default {
     
     
		components: {
     
     
			HelloWorld
		}
	}
</script>

1.3 关于标签名与标签属性名书写问题

1. 写法一: 一模一样
2. 写法二: 大写变小写, 并用-连接

2. 组件间通信

2.1 组件间通信基本原则

1. 不要在子组件中直接修改父组件的状态数据
2. 数据在哪, 更新数据的行为(函数)就应该定义在哪

2.2 vue 组件间通信方式

1. props
2. vue 的自定义事件
3. 消息订阅与发布(如: pubsub 库)
4. slot
5. vuex(后面单独讲)

2.3 组件间通信1: props

2.3.1 使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

2.3.2 定义MyComponent 时

1. 在组件内声明所有的props
2. 方式一: 只指定名称

props: ['name', 'age', 'setName']

3. 方式二: 指定名称和类型

props: {
    
    
	name: String,
	age: Number,
	setNmae: Function
}

4. 方式三: 指定名称/类型/必要性/默认值

props: {
    
    
	name: {
    
    type: String, required: true, default:xxx},
}

2.3.3 注意

1. 此方式用于父组件向子组件传递数据
2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3. 问题:
   a. 如果需要向非子后代传递数据必须多层逐层传递
   b. 兄弟组件间也不能直接props 通信, 必须借助父组件才可以

2.4 组件间通信2: vue 自定义事件

2.4.1 绑定事件监听

// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"
// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
    
    
this.deleteTodo(todo)
})

2.4.2 触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

示例

之前都是这样绑定事件监听 父组件传递给子组件

 <TodoHeader :addTodo="addTodo" /> 

变成

  <TodoHeader @addTodo="addTodo" />

或者这样

<TodoHeader ref="header" />

mounted(){
    
    // 异步执行代码
// 给<>绑定addTodo事件监听
// this.$on('addTodo', this.addTodo) // 给App绑定监听，不对的
this.$refs.header.$on('addTodo', this.addTodo)
}

子组件触发事件

this.addTodo(todo); // demo2中的代码

变成

this.$emit('addTodo', todo)

2.4.3 注意

1. 此方式只用于子组件向父组件发送消息(数据)
2. 问题: 隔代组件或兄弟组件间通信此种方式不合适

2.5 组件间通信3: 消息订阅与发布(PubSubJS 库)

2.5.1 订阅消息

PubSub.subscribe('msg', function(msg, data){
    
    })

2.5.2 发布消息

PubSub.publish('msg', data)

示例

订阅消息（绑定事件监听）

import PubSub from 'pubsub-js'

export default {
    
    
	mounted () {
    
    
		// 订阅消息(deleteTodo)
		PubSub.subscribe('deleteTodo', (msg, index) => {
    
    
		this.deleteTodo(index)
		})
	}
}

发布消息（触发事件）

// this.deleteTodo(this.index)
// 发布消息(deleteTodo)
PubSub.publish('deleteTodo', this.index)

2.5.3 注意

1. 优点: 此方式可实现任意关系组件间通信(数据)

2.5.4 事件的2 个重要操作(总结)

1. 绑定事件监听(订阅消息)
   目标: 标签元素<button>
   事件名(类型): click/focus
   回调函数: function(event){}
2. 触发事件(发布消息)
   DOM 事件: 用户在浏览器上对应的界面上做对应的操作
   自定义: 编码手动触发

2.6 组件间通信4: slot

2.6.1 理解

此方式用于父组件向子组件传递标签数据

2.6.2 子组件: Child.vue

<template>
	<div>
		<slot name="xxx">不确定的标签结构1</slot>
		<div>组件确定的标签结构</div>
		<slot name="yyy">不确定的标签结构2</slot>
	</div>
</template>

2.6.3 父组件: Parent.vue

<child>
	<div slot="xxx">xxx 对应的标签结构</div>
	<div slot="yyy">yyyy 对应的标签结构</div>
</child>