1. Parent-child components
- Props: Pass data to child components by defining the props attribute in the parent component. Subcomponents receive data through the props property. For example:
// 父组件
<template>
<child-component :message="hello"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
hello: 'Hello World!'
}
}
}
</script>
// 子组件
<template>
<div>{
{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
- $emit: pass data to the parent component by triggering an event in the child component. Parent components receive data by listening to events on child components. For example:
// 子组件
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello World!')
}
}
}
</script>
// 父组件
<template>
<child-component @message-sent="handleMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
console.log(message) // 'Hello World!'
}
}
}
</script>
- Provide/Inject: By providing data in the parent component, the child and grandchildren components can inject data. For example:
// 父组件
<template>
<div>
<provide-message :message="hello">
<child-component></child-component>
</provide-message>
</div>
</template>
<script>
import ProvideMessage from './ProvideMessage.vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ProvideMessage,
ChildComponent
},
data() {
return {
hello: 'Hello World!'
}
}
}
</script>
// ProvideMessage组件
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
provide() {
return {
message: this.message
}
},
props: {
message: String
}
}
</script>
// 子组件
<template>
<div>{
{ message }}</div>
</template>
<script>
export default {
inject: ['message']
}
</script>
The above are three commonly used methods for passing parameters in components in Vue, namely Props, $emit and Provide/Inject. Through these methods, we can pass data between components and realize communication between components.
2. Brother components
- Pass data through a common parent component: If two sibling components have a common parent component, you can define data in the parent component, and then pass it to the two sibling components through the props attribute. For example:
// 父组件
<template>
<div>
<child-component-1 :message="hello"></child-component-1>
<child-component-2 :message="world"></child-component-2>
</div>
</template>
<script>
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'
export default {
components: {
ChildComponent1,
ChildComponent2
},
data() {
return {
hello: 'Hello',
world: 'World'
}
}
}
</script>
// ChildComponent1组件
<template>
<div>{
{ message }}!</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
// ChildComponent2组件
<template>
<div>{
{ message }}!</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
- Pass data through the event bus: You can create an event bus in the Vue instance, and then trigger and listen to events in sibling components to achieve data transfer. For example:
// Vue实例
<script>
export default {
data() {
return {
message: ''
}
},
created() {
this.$on('message-sent', (message) => {
this.message = message
})
}
}
</script>
// ChildComponent1组件
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$root.$emit('message-sent', 'Hello')
}
}
}
</script>
// ChildComponent2组件
<template>
<div>{
{ message }} World!</div>
</template>
<script>
export default {
computed: {
message() {
return this.$root.message
}
}
}
</script>
- Passing data through Vuex state management: You can use Vuex to manage the state of the application, so as to realize the data transfer between sibling components. For example:
// Vuex store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, message) {
state.message = message
}
}
})
// ChildComponent1组件
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$store.commit('setMessage', 'Hello')
}
}
}
</script>
// ChildComponent2组件
<template>
<div>{
{ message }} World!</div>
</template>
<script>
export default {
computed: {
message() {
return this.$store.state.message
}
}
}
</script>
The above are the three commonly used methods for passing parameters to sibling components in Vue, namely passing data through a common parent component, passing data through an event bus, and passing data through Vuex state management. According to specific scenarios and requirements, choose an appropriate method to realize data transfer between sibling components.
3. Ancestors and offspring
- Pass data through props and emit: Ancestor components can pass data to intermediate components through props attributes, and intermediate components can pass data to descendant components through props attributes. Descendent components can pass data through emit: ancestor components can pass data to intermediate components through props attributes, and intermediate components can pass data to descendant components through props attributes. Descendent components can be accessed viae mi t transfer data: the ancestor component can pass the data to the intermediate component through the pro ps attribute , and the intermediate component can pass the data to the descendant component through the pro ps attribute . Descendant components can pass data back to ancestor components through the emit event. For example:
// 祖先组件
<template>
<div>
<middle-component :message="hello"></middle-component>
</div>
</template>
<script>
import MiddleComponent from './MiddleComponent.vue'
export default {
components: {
MiddleComponent
},
data() {
return {
hello: 'Hello'
}
}
}
</script>
// 中间组件
<template>
<div>
<child-component :message="message" @message-sent="sendMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
props: {
message: String
},
methods: {
sendMessage(message) {
this.$emit('message-sent', message)
}
}
}
</script>
// 后代组件
<template>
<div>{
{ message }} World!</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
- Pass data through provide and inject: ancestor components can provide data through the provide method, and descendant components can inject data through the inject method. For example:
// 祖先组件
<template>
<div>
<middle-component>
<child-component></child-component>
</middle-component>
</div>
</template>
<script>
import MiddleComponent from './MiddleComponent.vue'
export default {
components: {
MiddleComponent
},
provide() {
return {
message: 'Hello'
}
}
}
</script>
// 中间组件
<template>
<div>
<slot></slot>
</div>
</template>
// 后代组件
<template>
<div>{
{ message }} World!</div>
</template>
<script>
export default {
inject: ['message']
}
</script>
- Pass data through Vuex state management: Both ancestor components and descendant components can manage the state of the application through Vuex to achieve data transfer. For example:
// Vuex store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: 'Hello'
},
mutations: {
setMessage(state, message) {
state.message = message
}
}
})
// 祖先组件
<template>
<div>
<middle-component>
<child-component></child-component>
</middle-component>
</div>
</template>
<script>
import MiddleComponent from './MiddleComponent.vue'
export default {
components: {
MiddleComponent
}
}
</script>
// 中间组件
<template>
<div>
<slot></slot>
</div>
</template>
// 后代组件
<template>
<div>{
{ message }} World!</div>
</template>
<script>
export default {
computed: {
message() {
return this.$store.state.message
}
}
}
</script>
The above are three commonly used methods for transferring data between ancestor components and descendant components in Vue, namely passing data through props and $emit, passing data through provide and inject, and passing data through Vuex state management. According to specific scenarios and requirements, choose an appropriate method to realize data transfer between ancestor components and descendant components.
4. The connection between parameter passing and slots
In Vue, passing parameters and slots are two different concepts, but there is a certain relationship between them.
Passing parameters refers to passing data between components, which can be realized through props and $emit, provide and inject, Vuex, etc. The purpose of passing parameters is to allow components to share data, thereby realizing communication between components.
A slot is to define one or more slots in a component, and then when the component is used, any content can be inserted into the slot. The purpose of slots is to make components more flexible, and different content can be dynamically inserted according to usage scenarios.
The relationship between parameter passing and slots is that passing parameters can be used to control the contents of a slot. For example, you can pass data to child components through the props attribute, and use slots in the child components to display these data. For another example, you can pass the data in the child component to the parent component through the $emit event, and use slots in the parent component to display the data.
Here's an example that demonstrates how to control content in components by passing parameters and slots:
// 父组件
<template>
<div>
<child-component :message="hello">
<template #default="{ message }">
<div>{
{ message }} World!</div>
</template>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
hello: 'Hello'
}
}
}
</script>
// 子组件
<template>
<div>
<slot :message="message"></slot>
</div>
</template>
<script>
export default {
props: {
message: String
},
data() {
return {
message: this.message
}
}
}
</script>
In the above example, the parent component passes data to the child component through the props attribute, and the child component passes data to the parent component through the slot. Specifically, the parent component passes the data hello to the child component, the child component passes the data message to the slot, and the parent component receives the data through the slot and displays it on the page.
In short, parameter passing and slots are two different concepts, but there is a certain relationship between them. Passing parameters can be used to control the content in the slot, so as to realize communication and dynamic rendering between components.