Vue3常用的通讯方式有哪些

这篇文章主要讲解了“vue3常用的通讯方式有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3常用的通讯方式有哪些”吧！

props

父组件

    <template>      <div>          <Child :msg="msg" :obj="obj" />      </div>    </template>    <script setup>        import { ref, Reactive } from 'vue'        // Vue3.2版本setup语法糖引入组件不需要注册便可以使用组件        import Child from './child.vue'        const msg = ref('一只豆豆')        // 传递复杂类型数据        const obj = reactive({name: '豆豆'})    </script>

子组件

    <template>      <div></div>    </template>    <script setup>        // Vue3.2版本setup语法糖 defineProps 不需要引入可以直接使用        const props = defineProps({            msg: {                type: String,                default: ''            },            obj: {                type: Object,                default: () => {}            }        })        console.log('msg', props.msg); // 一只豆豆        console.log('obj', props.obj.name); // 豆豆</script>

$emit

父组件

    <template>      <div>          <Child @myClick="myClick" />      </div>    </template>    <script setup>        import { ref, reactive } from 'vue'        import Child from './child.vue'        const myClick = val => {            console.log('val', val); // emit传递信息        }</script>

子组件

    <template>      <div>          <button @click="handleClick">click me</button>      </div>    </template>    <script setup>        // Vue3.2版本setup语法糖 defineEmits 不需要引入可以直接使用        const emit = defineEmits(['myClick']) // 如果有多个emit事件可以往数组后边添加即可                const handleClick = ()=>{            emit("myClick", "emit传递信息")        }    </script>

EventBus

在Vue3中就没有EventBus了，可以使用mitt.js来替代
安装

$ npm install --save mitt

bus.js

    import mitt from 'mitt'    export default mitt()

兄弟组件A emit触发

    <template>      <div>        <button @click="handleClick">click me</button>      </div>    </template>    <script setup>        import bus from './bus'        const handleClick = () => {          bus.emit('foo', '豆豆')        }    </script>

兄弟组件B on接收

    <template>      <div></div>    </template>    <script setup>        import bus from './bus'        bus.on('foo', e => {          console.log('e', e) // '豆豆'        })    </script>

v-model

Vue2版本是可以通过修饰符.sync让子组件修改父组件的值，但是Vue3就取消这个修饰符，融合到v-model里边去了

父组件

    <template>      <div>        <div>{{ name }}</div>        <div>{{ age }}</div>        <Child v-model:name="name" v-model:age="age" />      </div>    </template>    <script setup>        import Child from './child.vue'        import { ref } from 'vue'        const name = ref('豆豆')        const age = ref(20)    </script>

子组件

    <template>      <div>        <div></div>        <button @click="handleChange">click me</button>      </div>    </template>    <script setup>        // 'update:name' 这样写在console里面就不会有告警了        const emit = defineEmits(['update:name', 'update:age'])        const handleChange = () => {          emit('update:name', '一只豆豆')          emit('update:age', 18)        }    </script>

expose / ref

子组件通过 expose 暴露属性和方法出去
父组件通过 ref 来获取子组件的值和调用方法

父组件

    <template>      <div>        <Child ref="myRef" />        <button @click="handleClick">click me</button>      </div>    </template>    <script setup>        import Child from './child.vue'        import { ref } from 'vue'        const myRef = ref(null)        const handleClick = () => {          console.log('myRef', myRef.value.name) // 豆豆          myRef.value.fn() // 一只豆豆        }    </script>

子组件

    <template>      <div>        <div></div>      </div>    </template>    <script setup>        // Vue3.2版本setup语法糖 defineExpose 不需要引入可以直接使用        defineExpose({          name: '豆豆',          fn () {            console.log('一只豆豆')          }        })    </script>

provide / inject

provide / inject 可以给后代组件传参，嵌套多少层都没问题

父组件

    <template>      <div>        <Child />      </div>    </template>    <script setup>        import Child from './child.vue'        import { ref, provide } from 'vue'        const name = ref('豆豆')        provide('name', name)    </script>

后代组件

    <template>      <div>        <div>后代组件name {{ name }}</div>      </div>    </template>    <script setup>        import { inject } from 'vue'        const name = inject('name')        console.log('name', name.value) // 豆豆    </script>

Vue2使用 provide / inject 传递数据不是响应式的，所以只能通过传递一个对象数据才能变成响应式
Vue3使用 provide / inject传递数据就是响应式了，这就很便捷

插槽 slot

普通插槽

父组件

    <template>      <div>        <Child>豆豆</Child>      </div>    </template>    <script setup>        import Child from './child.vue'    </script>

子组件

    <template>      <div>        <slot></slot>      </div>    </template>    <script setup></script>

具名插槽

    <template>      <div>        <Child>          豆豆          <template #name>            <div>              <button>一只豆豆</button>            </div>          </template>        </Child>      </div>    </template>    <script setup>        import Child from './child.vue'    </script>

子组件

    <template>      <div>        // 普通插槽        <slot></slot>        // 具名插槽        <slot name="name"></slot>      </div>    </template>    <script setup></script>

效果图

作用域插槽

父组件

    <template>      <!-- v-slot="{scope}" 子组件返回的每一项数据 -->      <Child v-slot="{ scope }" :arr="arr">        <div class="box">          <div>名字：{{ scope.name }}</div>          <div>年龄：{{ scope.age }}</div>          <div>爱好：{{ scope.like }}</div>        </div>      </Child>    </template>    <script setup>        import { reactive } from 'vue'        import Child from './child.vue'        const arr = reactive([          { name: '张三', age: 18, like: '篮球' },          { name: '李四', age: 19, like: '排球' },          { name: '王五', age: 20, like: '足球' }        ])    </script>    <style lang="less">        .box {          display: inline-block;          width: 200px;          border: dashed blue 1px;          margin-right: 15px;          padding: 10px;        }    </style>

子组件

    <template>      <div>        <!-- :scope="item" 返回每一项 -->        <slot v-for="item in arr" :scope="item" />      </div>    </template>    <script setup>        const props = defineProps({          arr: {            type: Array,            default: () => []          }        })    </script>

效果图

感谢各位的阅读，以上就是“Vue3常用的通讯方式有哪些”的内容了，经过本文的学习后，相信大家对Vue3常用的通讯方式有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！