vue3组件通信(8种)

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>

到这里也就结束了
记得点赞哦