1.props(父传子)
父组件
<template>
<div>
<child-component :my-message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '这是从父组件传递给子组件的信息'
};
}
};
</script>
子组件
<template>
<div>
<child-component :my-message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '这是从父组件传递给子组件的信息'
};
}
};
</script>
2.自定义事件($emit 子传父)
子组件
<!-- 子组件 Child.vue -->
<template>
<button @click="sendDataToParent">传递数据给父组件</button>
</template>
<script>
export default {
methods: {
sendDataToParent() {
// 向父组件传递数据
this.$emit('childData', '这是子组件传递的数据');
}
}
};
</script>
父组件
<!-- 父组件 Parent.vue -->
<template>
<div>
<p>从子组件接收到的数据:{{ receivedData }}</p>
<Child @childData="handleChildData" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
receivedData: ''
};
},
methods: {
handleChildData(data) {
// 处理从子组件接收到的数据
this.receivedData = data;
}
}
};
</script>
3.Provide / Inject(适合跨层级传值)
祖先组件
<!-- AncestorComponent.vue -->
<template>
<div>
<h2>祖先组件</h2>
<!-- 使用 provide 来提供数据 -->
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
// 在 provide 中提供数据,可以是对象、函数或任何数据类型
return {
message: '这是来自祖先组件的数据'
};
}
};
</script>
子组件
<!-- ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<!-- 使用 inject 来注入提供的数据 -->
<GrandchildComponent />
</div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';
export default {
components: {
GrandchildComponent
}
};
</script>
孙子组件
<!-- GrandchildComponent.vue -->
<template>
<div>
<h4>孙子组件</h4>
<!-- 使用 inject 来获取提供的数据 -->
<p>{{ providedMessage }}</p>
</div>
</template>
<script>
export default {
inject: ['message'], // 使用 inject 注入提供的数据,名称需与 provide 提供的键名一致
computed: {
providedMessage() {
return this.message; // 获取提供的数据
}
}
};
</script>
4.eventbus(非父子组件间通信的方式)
创建EventBus
首先,创建一个EventBus实例,eventBus.js
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
发送事件
在需要发送数据的组件中,导入EventBus并使用$emit
方法触发一个事件,并附带要传递的数据:
// senderComponent.vue
import { EventBus } from './eventBus.js';
export default {
methods: {
sendData() {
EventBus.$emit('data-transfer', { key: 'value' });
}
}
};
接收事件
在需要接收数据的组件中,同样导入EventBus并使用$on
方法监听之前触发的事件,并定义一个回调函数来处理接收到的数据:
// receiverComponent.vue
import { EventBus } from './eventBus.js';
export default {
created() {
this.listenForData();
},
beforeDestroy() {
// 清理监听,避免内存泄漏
EventBus.$off('data-transfer', this.handleData);
},
methods: {
//用$on接收
listenForData() {
EventBus.$on('data-transfer', this.handleData);
},
handleData(data) {
console.log('Received data:', data);
// 在这里处理接收到的数据
}
}
};