vue3组件通信
props
通过setup语法糖来实现,下面是代码
父组件中
<template>
<Childs :msg="msg" :msgs="msgs"></Childs>
</template>
<script setup>
import { ref,reactive } from 'vue';
import Childs from './child.vue'
const msg = ref('这是传递给子组件的')
const msgs = reactive(['这是传递给子组件的'])
</script>
子组件
<template>子组件</template>
<script setup>
const props = defineProps({
// msg:String
msgs:{
type:String,
default:""
}
})
console.log(props) //打印一下看能不能接收到
</script>
$emit
通过$emit实现子传父通信
<!-- $emit -->
<!-- Child.vue -->
<template>
<button @click="handleClick">按钮</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['myClick']);
const handleClick = () => {
emit('myClick', '我是子组件的信息');
};
</script>
<!-- Parent.vue -->
<template>
<child @myClick="onMyClick"></child>
</template>
<script setup>
import Child from './Child.vue';
const onMyClick = (msg) => {
console.log(msg); // 这是父组件收到的信息
};
</script>
v-model
<!-- Parent.vue -->
<template>
<div>
<Child v-model:name="name"></Child>
<p>{{ name }}</p>
</div>
</template>
<script setup>
import Child from './Child.vue';
import { ref } from 'vue';
const name = ref('111');
</script>
<!-- Child.vue -->
<template>
<p>{{ name }}</p>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
name:String
});
</script>
$attrs
使用$attrs实现父组件像子组件传递数据
<!-- Parent.vue -->
<template>
<Child :msg="msg" title="父组件传递的数据"></Child>
</template>
<script setup>
import Child from "./Child.vue";
import { ref } from "vue";
const msg = ref("我是父组件数据111111");
</script>
<!-- Child.vue -->
<template>
<div>
<p>{{ msg }}</p>
<p>{{ title }}</p>
</div>
</template>
<script setup>
import { defineProps, useAttrs } from "vue";
const props = defineProps({
msg: String,
});
const attrs = useAttrs();
const title = attrs.title;
</script>
export/ref
父组件中
<template>
<div>
<Child :countRef="countRef" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './child.vue';
const countRef = ref(0);
</script>
<template>
<div>
子组件计数:{{ count }}
<button @click="increment">+1</button>
</div>
</template>
<script setup>
import { exportRef } from 'vue';
export default {
props: {
countRef: {
type: Object,
required: true,
},
},
// 通过 export 导出 countRef
setup(props) {
const count = props.countRef;
exportRef('count', count);
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
};
</script>
provide/inject
使用provide/inject实现跨层级通信
<!-- Parent.vue -->
<template>
<div>
<Child></Child>
</div>
</template>
<script setup>
import { provide } from 'vue';
import Child from './child.vue';
const message = '我是父组件数据';
provide('message', message);
</script>
<!-- Child.vue -->
<template>
<div>
<p>子组件数据:{{ injectedMessage }}</p>
</div>
</template>
<script setup>
import { inject, ref } from 'vue';
import { provide } from 'vue';
const injectedMessage = inject('message', '默认值');
</script>
vuex
使用vuex实现一个简单的通信需要以下几个步骤
1.下载vuex
npm install vuex
后续是代码
在 store.js 文件中创建 store 对象。
import { createStore } from 'vuex';
const store = createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
},
});
export default store;
<template>
<div>
<p>计数器:{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['count']),
},
methods: {
...mapMutations(['increment']),
},
};
</script>
mitt
跟vuex一样首先我们需要下载mitt库
npm install mitt
后续是代码
<template>
<div>
<p>计数器:{{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
created() {
this.$bus.on('increment', () => {
this.count++;
});
},
};
</script>
<template>
<div>
<button @click="increment">+1</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$bus.emit('increment');
},
},
};
</script>
到这里也就结束了
记得点赞哦