1. Props和Emit
Props是父组件向子组件传递数据的属性，通过子组件的props属性接收。Emit是子组件向父组件触发事件，通过父组件的@事件属性监听。
// 父组件
<template>
<child-component :message="message" @update="updateMessage"></child-component>
</template>
<script>
export default {
data() {
return {
message: "Hello, World!"
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage
}
}
}
</script>
// 子组件
<template>
<div>
{{ message }}
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: ["message"],
methods: {
updateMessage() {
this.$emit("update", `New Message: ${this.message}`)
}
}
}
</script>2. $emit和$on
$emit和$on是VUE实例可以直接使用的事件发射和监听方法。$emit可以触发一个事件，$on可以监听一个事件。
// 父组件
<template>
<child-component></child-component>
<button @click="updateMessage">Update Message</button>
</template>
<script>
export default {
methods: {
updateMessage() {
this.$emit("update-message")
}
}
}
</script>
// 子组件
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
mounted() {
this.$on("update-message", () => {
this.message = `New Message: ${this.message}`
})
}
data() {
return {
message: "Hello, World!"
}
},
}
</script>3. $dispatch和$broadcast
$dispatch和$broadcast是VUE实例可以直接使用的事件派发和广播方法。$dispatch可以向子组件触发一个事件，$broadcast可以向所有子组件广播一个事件。
// 父组件
<template>
<child-component></child-component>
<button @click="updateMessage">Update Message</button>
</template>
<script>
export default {
methods: {
updateMessage() {
this.$dispatch("update-message")
}
}
}
</script>
// 子组件
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
mounted() {
this.$on("update-message", () => {
this.message = `New Message: ${this.message}`
})
}
data() {
return {
message: "Hello, World!"
}
},
}
</script>4. $attrs和ref
$attrs是一个特殊的属性，它包含了父组件传递给子组件的所有属性，但不包括props。ref是一个特殊的属性，它指向一个子组件的实例，可以通过它来访问子组件的实例。
// 父组件
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: "Hello, World!"
}
},
render(h) {
return h("child-component", {
attrs: this.$attrs,
})
}
}
</script>
// 子组件
<template>
<div>
{{ message }}
{{ color }}
</div>
</template>
<script>
export default {
props: ["message"],
mounted() {
console.log(this.$attrs.color) // 输出: "red"
}
}
</script>
