vue3中的组件间通信

Vue3.0组件通信

父给子传值 props
$attrs给子组件传值
$parent
provide / inject
子组件向父组件传递 emit

父给子传值 props

我们通过在父组件引用子组件的时候，可以通过自定义属性进行值的传递，在子组件通过 props 进行接受。

//parent.vue
<template><div class="search"><span>这是父组件的值:{{test}}</span><Child :toChild="test"/> // 通过自定义属性 toChild</div>
</template>
<script>
import Child from './child.vue'
export default {name: "parent",setup(){const test = ref("传给子组件")return {test}},components:{Child},
}
</script>

//child.vue
<template><div class="child">子组件接收的值:{{toChild}}</div>
</template>
<script>
export default {name:"child",props:["toChild"], //通过props接收自定义属性 toChild
}
</script>

$attrs给子组件传值

我们的 $attrs 只会包括未被 props 继承的属性。

//parent.vue
<template><div class="search"><span>这是父组件的值:{{test}}</span><Child :toChild="test" :toTest="`测试数据`"/></div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {name: "parent",setup(){const test = ref("传给子组件")return {test}},components:{Child},
}
</script>

//child.vue
<script>
export default {name:"child",props:["toChild"],created:function(){console.log(this.$attrs,"test")},
}
</script>

我们控制台的打印为：

$parent

通过 $parent 获取父级的时候，可以获取父级的全部属性。

//parent.vue
<template><div class="search"><span>这是父组件的值:{{test}}</span><Child :toChild="test" :toTest="`测试数据`"/></div>
</template>
<script>
import {ref} from 'vue'
import Child from './child.vue'
export default {name: "parent",setup(){const test = ref("传给子组件")const bar = ref("这你都可以拿得到")return {test,bar}},components:{Child},
}
</script>

//child.vue
<template><div class="child">子组件接收的值:{{toChild}}</div>
</template>
<script>
export default {name:"child",props:["toChild"],created:function(){console.log("bar:",this.$parent.bar)console.log("test:",this.$parent.test)},
}
</script>

我们控制台的打印为：

可以看到我们并没有对 test 进行抛出，但是我们还是可以获取到，同时需要注意的是，我们获取的方式是使用的父级的变量名。

provide / inject

//parent.vue
<script>
import {ref,provide} from 'vue'
export default {name: "parent",setup(){const test = ref("传给子组件")provide("testpro",test)},components:{Child},
}
</script>

//child.vue
<script>
import {inject} from 'vue'
export default {name:"child",created:function(){console.log("test:",inject("testpro"));},
}
</script>

在我们的控制台打印如下：

通过 provide / inject 获取只需要通过对应的API 提供，注入就可以获取，不需要抛出。

子组件向父组件传递 emit

//parent.vue
<template><div class="search"><span>这是父组件的值</span><Child @testEmit="updateCity"/></div>
</template>
<script>
import Child from './child.vue'
export default {name: "parent"methods:{updateCity(data){console.log("子组件传递的：",data);}},components:{Child},
}
</script>

//child.vue
<template><div class="child" @click="toChild"></div>
</template>
<script>
export default {name:"child",methods:{toChild(){this.$emit("testEmit","传给父组件")}},
}
</script>

但是这种方法在 Vue3.x 中不推荐使用。

vue3中的组件间通信相关推荐

vue组件间通信之兄弟组件通信（vue3.0$EventBus）
vue组件间通信之兄弟组件通信(vue3.0$EventBus) vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带 ...
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue中组件间通信的6种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...
Vue组件间通信--Vuex
1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. 2.何时使用? 多 ...
vue3-父子组件间通信
文章目录方案一:props/emits props:父组件->子组件 emits:子组件->父组件方案二:v-model/ emits 方案三:ref/emits 应用场景在实际业务 ...
深入浅出，带你看懂Vue组件间通信的8种方案
前言 Vue种组件通信的情况有多种,总结有以下4种情况: 父子组件间通信兄弟组件间通信祖孙后代间通信无关系组件间通信 8种解决方案通过 props 传递通过 $emit 触发自定义事件使用 ...
容器间通信_Vue组件间通信的6种方式，前端工程师人人都会，网友：太简单了...
Vue 组件间通信只要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信,下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信. (1)props / $emit 适用父子组件通 ...
深入解析Vue组件间通信
React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通信,兄弟间通 ...