Vue 组件间通信有哪几种方式？

1. 方式一: props1). 实现父向子通信: 属性值是非函数 2). 实现子向父通信: 属性值是函数2. 方式二: vue自定义事件1). 用来实现子组件向父组件通信2). 相关语法:● 父组件中绑定自定义事件监听: &nbsp;<code>&lt;Child @eventName="callback"&gt;</code>● 子组件中分发事件 &nbsp;<code>this.$</code><code>emit</code><code>(</code><code>'eventName'</code><code>, data</code><code>)</code>3. 方式三: 全局事件总线1). 实现任意组件间通信2). 编码:● 将入口js中的vm作为全局事件总线对象: &nbsp; &nbsp; <pre><code class="language-javascript">beforeCreate() {
 Vue.prototype.$bus = this
}</code></pre>● 分发事件/传递数据的组件: this.$bus.$emit('eventName', data)● 处理事件/接收数据的组件: this.$bus.$on('eventName', (data) =&gt; {})4. 方式四: v-model1). 实现父子之间相互通信2). 组件标签上的v-model的本质● 父组件: <pre><code class="language-javascript">&lt;CustomInput v-model="name"/&gt;
&lt;!-- 等价于 --&gt;
&lt;CustomInput :value="name" @input="name=$event"/&gt;</code></pre>● 子组件: <pre><code class="language-javascript">&lt;input type="text" :value="value" @input="$emit('input', $event.target.value)"&gt;
props: ['value']</code></pre>5. 方式五: .sync1). 实现父子之间相互通信2). 组件标签的属性上使用.sync的本质● 父组件:<pre><code class="language-javascript">&lt;child :money.sync="total"/&gt;
&lt;!-- 等价于 --&gt;
&lt;Child :money="total" @update:money="total=$event"/&gt;
data () {
 return {
 total: 1000
 }
}</code></pre>● 子组件:<pre><code class="language-javascript">&lt;button @click="$emit('update:money', money-100)"&gt;花钱&lt;/button&gt;
props: ['money']</code></pre>6. $attrs与$listeners1). $attrs● 实现当前组件的父组件向当前组件的子组件通信● 它是包含所有父组件传入的标签属性(排除props声明, class与style的属性)的对象● 使用: 通过 v-bind=”$attrs” 将父组件传入的n个属性数据传递给当前组件的子组件2). $listeners● 实现当前组件的子组件向当前组件的父组件通信● $listeners是包含所有父组件传入的自定义事件监听名与对应回调函数的对象● 使用: 通过v-on=”$listeners” 将父组件绑定给当前组件的事件监听绑定给当前组件的子组件7. $refs, $children, $parent1). $refs● 实现父组件向指定子组件通信● $refs是包含所有有ref属性的标签对象或组件对象的容器对象● 使用: 通过 this.$refs.child 得到子组件对象, 从而可以直接更新其数据或调用其方法更新数据2). $children● 实现父组件向多个子组件通信● $children是所有直接子组件对象的数组● 使用: 通过this.$children 遍历子组件对象, 从而可以更新多个子组件的数据3). $parent● 实现子组件向父组件通信● $parent是当前组件的父组件对象● 使用: 通过this.$parent 得到父组件对象, 从而可以更新父组件的数据8. Vuex1). 实现任意组件间通信2). Vuex 是一个专为 Vue 应用程序设计的管理多组件共享状态数据的 Vue 插件● 任意组件都可以读取到Vuex中store的state对象中的数据● 任意组件都可以通过dispatch()或commit()来触发store去更新state中的数据● 一旦state中的数据发生变化, 依赖于这些数据的组件就会自动更新

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识