Vue 组件通信

于 2024-08-22 10:38:34 发布
阅读量842 收藏 8
点赞数 12
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61619549/article/details/141186298
版权

基本概念

Vue 作为一个渐进式 JavaScript 框架，其核心设计之一就是组件化，它通过提供多种隔离手段来确保组件的独立性和封装性（如CSS样式隔离的 '<style scoped>' ，数据隔离data函数），增强代码的复用性、可维护性增强、开发效率提升。

但随着项目复杂度的增加，组件与组件之间不可避免地需要进行数据交互。为了在实现目的的同时，减少组件之间的直接依赖和耦合，vue提供了许多组件通信的方式。

vue 2组件通信

传递响应式数据提供的一个可观察的对象（如用Vue.observable()创建的对象）

1.props

props通信方法可以实现父组件向子组件传递参数,也可以实现子组件给父组件传递参数，是使用频率最高的

1）父传子：属性值非函数

父组件，引入子组件并给子组件绑定一个message参数，用以传递父组件的数据

子组件，使用props()接收

代码：

//父组件传递
<ChildA :message="parent_msg"/>

//子组件接收
export default {
//数组写法
  props: ["message"]
//对象写法
  props :{
    message: {
      type: String,
      required: true, //是否规定必须得有
      default: '默认值'//默认数据，当父组件没有传递数据时，读取该数据
    }
  }
}

2）子传父：属性值为函数（可携带值）

 父组件，引入子组件并给子组件绑定一个sendMsg参数(可以携带参数的函数)

子组件，使用props()接收，接收到函数后，可用来向父组件传递自身数据

代码：

//父组件绑定带值函数
<ChildA :sendMsg="receive"/>

receive(value){
   console.log(value)//子组件数据
}
//子组件接收传递
<button @click="sendMsg('子组件数据')">传递</button>

props: ["sendMsg"]
//或
props:{
    sendMsg:{
        type:Function,
        default:()=>{}
    }
}

2.$emit

自定义事件emits，常用于子传父

父组件：引入子组件，并监听子组件的自定义事件sendMsg的触发，当事件被触发时，执行方法receive来处理接收到的数据

子组件：使用this.$emit声明一个自定义事件sendMsg，调用tirggerFun方法时触发该事件并向外传递数据child_msg

代码：

//父组件监听事件触发方法
<ChildA @sendMsg="receive"/>
receive(value){
  console.log(value)//子组件数据
}
//子组件,触发事件携带值
<button @click="triggerFun">传递</button>
triggerFun(){
  this.$emit('sendMsg','子组件数据')
}

3.provide和inject

可以实现上层组件对于后代组件的值传递，相当于 “ 穿透传递 ”

祖组件，引入子组件，使用provide向后代组件提供数据。

后代组件，使用inject接收数据。

注意：provide是一个对象，inject是一个数组。

代码:

//祖组件
provide:{
  parent_msg:'parent组件的信息'
}
//后代组件
inject:['parent_msg']

4.$refs

$refs是一个包含了所有带有 ref 属性的子组件或 DOM 元素的引用的对象

在父组件中通过$refs获取到子组件实例对象的引用后。可利用函数可以携带值得特性，由父组件向子组件传递数据，也可以由父组件主动获取子组件的数据（getter）

父传子

父组件：引入子组件，并在组件上为其声明一个ref属性childRef。通过this.$refs.childRef.[方法/属性]来访问子组件中的属性方法。

子组件：定义用于传递或接收数据的方法。如getValue

代码：

//父组件
<ChildA ref="childRef"/>

mounted() {
  this.$refs.childRef.getValue('父组件数据')
}
//子组件
getValue(value){
  console.log(value)
}

 5.$parent和$children

1）$parent

$parent：获取父组件实例对象，包含父节点中所有的数据和方法等

父组件：引入子组件

子组件：通过this.$parent.[方法/属性]来访问父组件中的属性方法。

代码：

//父组件
...属性方法

//子组件
console.log(this.$parent.parent_msg)//访问父组件属性
this.$parent.testFun()//调用父组件方法

2）.$children

 $children：获取一个包含所有子组件(不包含孙子组件)的组件实例 对象数组，可以直接拿到子组件中所有数据和方法等 

 父组件：引入子组件，通过this.$children[index].[方法/属性]来访问子组件中的属性方法

//父组件
console.log(this.$children[0].child_msg)//访问第一个子组件的属性
this.$children[0].testFun()//调用第一个子组件的方法

//子组件
...属性方法

6.$attrs和$listeners

先理解：一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

//父组件
<ChildA :parent_msg="parent_msg" :other="othre"/>
//子组件
props:['parent_msg']

比如：这里的other就是非 prop 的 attribute

1）$attrs

$attrs：是一个包含父作用域里（除 class 和 style 之外）的非 props 属性集合，可以在模板的表达式中直接用 $attrs 访问这些非 prop 的 attribute

父组件：引入子组件，并在组件上绑定参数。如parent_msg和other_msg

子组件：直接在template中使用$attrs访问非props数据，在script中使用this.$attrs访问

代码： 

//父组件
<ChildA :parent_msg="parent_msg" :other="other"/>

//子组件

1.在template中访问
{{ $attrs }}

2.在script中访问
console.log(this.$attrs)

3.通过v-bind直接传给下一级子组件：比如在子组件Child中给孙组件GrandSon绑定$atter
<GrandSon v-bind="$attrs"></GrandSon>

2）$listeners

$listeners：是一个包含父作用域里 .native 除外的监听事件集合。

 

父组件：引入子组件，并在组件上监听事件。如click和enter

子组件：在script中通过访问this.$listeners访问父组件中未被.native修饰的事件。可通过$emit来触发

代码：

//父组件
<ChildA @click="clickFun" @enter.native="enterFun"/>

//子组件
1.script中直接访问
console.log(this.$listeners) //{click: f}
this.$emit('click')//触发parent的clickFun


2.通过v-on直接传给下一级子组件：比如在子组件Child中监听孙组件GrandSon的事件
<GrandSon v-on="$listeners"></GrandSon>

7.v - model

父组件，引入子组件，并使用v-model指令为其绑定message参数用以数据的双向绑定

子组件，使用props()接收message；使用$emit触发mole事件修改父组件中的message

代码：

//父组件
<ChildA v-model="message"></ChildA>

</script>
//子组件
<input :value="message" @input="handlerChange" />

props: ["message"],
model:{ // 可以修改事件名，默认为 input
  event:'update'
},
methods: {
  handlerChange(e) {
   this.$emit("update", e.target.value);
}

8.Bus

在 Vue 2 中，全局事件总线是一种在组件之间通信的方式，尤其是当组件结构较深，而你又不想通过多层组件的 props 和 events 传递数据时。全局事件总线通常是一个空的 Vue 实例，用于触发和监听事件。这样，任何组件都可以通过这个实例来发送或接收事件，实现跨组件通信。

1）.在main.js文件中配置

// 创建一个空的 Vue 实例作为全局事件总线  
const EventBus = new Vue();  
  
// 将 EventBus 添加到 Vue 的原型上，这样你就可以在任何组件中通过 this.$eventBus 访问它  
Vue.prototype.$eventBus = EventBus;  

// Vue 应用实例  
new Vue({  
  // ...  
});

2）.发送事件

在任意组件中，可以使用 $emit 方法来触发一个事件，并通过第二个参数传递数据。

// 在某个组件中  
this.$eventBus.$emit('eventName', { message: 'Hello from Component A!' });

3）.监听事件

在另一个组件中，可以使用 $on 方法来监听这个事件。同时，还需要在组件销毁前使用 $off 方法来移除监听器，以避免潜在的内存泄漏。

// 在另一个组件中  
created() {  
  // 监听事件  
  this.$eventBus.$on('eventName', this.handleEvent);  
},  
beforeDestroy() {  
  // 移除监听器  
  this.$eventBus.$off('eventName', this.handleEvent);  
},  
methods: {  
  handleEvent(data) {  
    console.log(data.message); // 输出: Hello from Component A!  
  }  
}

示例：

父组件，在Parent组件中引入ChildA，ChildB

子组件，在ChildA中注册监听事件，在ChildB中中触发ChildA注册的监听事件来实现数据通信

代码：

//Parent
....引入子组件

//ChildA
this.$bus.$on("testFun", (value) => {
     console.log(value)
})

//ChildB
<button @click="triggerFun">触发</button>

triggerFun(){
     this.$bus.$emit("testFun", '实现任意组件通信')
}

9.vuex 

推荐参考：Vue状态管理工具：vuex

可创建一个专用于组件通信的模块

vue 3组件通信

以下示例皆以vue 3 Composition API 的 <script setup> 语法糖为基础（传递响应式数据使用ref，reactive声明的对象）

1.props

1）父传子：属性值非函数

父组件，引入子组件，并给其绑定一个参数

子组件，使用defineProps()接收

代码：

//父组件
<Child :message="info"></Child>

//子组件
const props = defineProps(['message'])
//或
const props = defineProps({
  msg: {
    type: String,
    required: true, //是否规定必须得有
    default: '默认值'//默认数据，当父组件没有传递数据时，读取该数据
  }
}

defineProps 是 Vue 3 中 <script setup> 语法糖提供的一个编译时宏，用于在 <script setup> 语法糖中显式地声明组件接收的 props。

2）子传父：属性值为函数（可携带值）

父组件，引入子组件，并给其绑定一个参数(可以携带数据的函数)

子组件，使用defineProps()接收，在接收到父组件传递的函数后，可用来向父组件传递自身数据

代码：略

2.$emit

自定义事件emits，常用于子传父

父组件：引入子组件，并监听子组件的自定义事件sendMsg的触发，当事件被触发时，执行方法receive来处理接收到的数据

子组件：使用defineEmits声明一个可以传递数据的自定义事件getMsg，用以向父组件传递数据

代码：

//父组件
<Child @sendMsg="receive" />

function receive(value) {
  console.log(value)
}

//子组件
<button @click="triggerFun()">传递</button>

const emits = defineEmits(['sendMsg'])

function triggerFun() {
  emits('sendMsg', '子组件数据')
}

defineEmits是 Vue 3 中 <script setup> 语法糖提供的一个编译时宏，用于声明组件可以触发的自定义事件。当使用defineEmits时，实际上是在告诉Vue：“这个组件可能会触发这些事件，请帮我设置好内部机制以便我可以从组件内部触发它们。” 

3.provide和inject

1）祖辈向后代传递数据

祖组件，从vue中引入provide ，而后使用provide向后代提供数据。provide('名字',值)     

后代组件，从vue中引入inject，而后使用inject接收数据。inject('名字','默认值')

代码：

//parent组件
import { provide } from 'vue'

let parent_msg = 'parent的数据'
provide('dataName', parent_msg)

//grandson组件
import { inject } from 'vue'

const data = inject('dataName', '默认值')

2）后代向祖辈传递数据

祖组件，从vue中引入provide ，使用provide向后代提供可携带值得方法。provide('名字',方法)     

后代组件，从vue中引入inject，使用inject接收方法，收到之后使用该方法携带数据向祖组件传递。inject('名字','默认方法')

代码：略

4.expose和ref

可以在父组件中获取到子组件的实例 。同vue2，可利用函数可以携带值得特性，由父组件向子组件传递数据，也可以由父组件主动获取子组件的数据（getter）

父组件主动获取子组件数据

父组件，引入子组件并给其设置ref属性，并声明一个与其同名的ref变量，通过[变量名].value来获取子组件的实例对象，访问子组件向外暴露出的属性和方法

子组件，通过defineExpose()控制子组件内部哪些内容可以通过模板引用被外部访问

代码：

//parent组件
<Child ref="childRef" />

import { ref, onMounted } from 'vue'

const childRef = ref(null)
onMounted(() => {
  console.log(childRef.value.child_msg)
})

//child组件
let child_msg = 'child的数据'

defineExpose({
  child_msg
})

defineExpose 是 Vue 3 中 <script setup> 语法糖提供的一个编译时宏，它用于显式地暴露组件内部的属性、方法或其他响应式状态给其父组件或外部使用

5.$parent

可以在子组件内部获取到父组件的实例 

父组件，通过defineExpose({})控制父组件内部哪些内容可以通过模板引用被外部访问

子组件，在调用方法时将$parent作为参数传入其中，可在方法内部访问父组件暴露的属性和方法

代码：

//parent组件
let parent_msg = 'parent的数据'
defineExpose({
  parent_msg
})

//child组件
<button @click="triggerFun($parent)">触发</button>

const triggerFun = (parentItem) => {
  console.log(parentItem.parent_msg)
}

vue 2中的  $children，由于违背了单向数据流，官方在vue 3中已经删除

 6.$attrs 

首先理解透传：官方的解释是，“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。

透传进子组件的 attribute 可以在模板的表达式中直接用 $attrs（一个组件实例上的属性） 访问到。 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

和vue 2不同的是，vue 3中$listeners 属性被移除，所有的事件监听器现在都包含在 $attrs 中 

父组件，引入子组件并给子组件绑定参数，监听事件。用以传递数据

子组件，通过$attrs 对象访问透传attribute

代码：

//parent组件
<Child :msg="parent_msg" :other="other" @click="testFun" />

let parent_msg = 'parent的数据'
let other = '其他'
const testFun = () => {
  console.log('触发parent的testFun')
}

//child组件
//templa模板中
<p>{{ $attrs }}</p>

//script标签中
import { useAttrs } from 'vue'
defineProps(['msg'])

//直接访问attrs对象
const attrs = useAttrs()
console.log(attrs) //{other: '其他', onClick: ƒ}

更多详细内容，请查看官方文档 透传 Attributes | Vue.js

7.v - model

在组件通信中可用于实现父子组件数据同步

父组件，引入子组件，并使用v-model指令为其绑定modelValue参数用以数据的双向绑定

子组件，使用defineProps()接收message数据，使用defineEmits()定义事件update:modelValue，

详细描述：

“update:modelValue ”和 “modelValue” 是Vue为组件上的v-model组件通信提供的默认事件名和prop名约定（update: 前缀是用于指示这个事件是用来更新某个prop值的约定）。

父组件中，使用v-model通过v--model:modelValue绑定子组件定义的prop 和update:modelValue 事件。当父组件更新message时，会通过modelValue 将message传递给子组件。

子组件中，v-model会将modelValue和update:modelValue 事件绑定在一起，当子组件的input事件触发时会emit一个update:modelValue 事件，从而更新父组件的message。

代码：

//Parent组件
{{ message }}
<hr />
<Child v-model:modelValue="message" />

import Child from '@/page/Child.vue'
import { ref } from 'vue'
let message = ref('parent的数据')

//Child组件
<input type="text" :value="modelValue" @input="updateValue" />
{{ modelValue }}

const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
function updateValue(e) {
  emits('update:modelValue', e.target.value)
}

8.mitt

在vue 3中，已经没有提供配套的事件总线bus，需要使用第三方库mitt来完成vue 2中bus完成的事情。mitt是一个轻量级（仅200字节）的、功能强大的事件发射器/事件监听器库，非常适合在Vue项目或其他JS环境中使用来实现事件通信。使用Mitt可以任意组件之间进行通信

1）在项目中安装mitt

#npm
npm install mitt
#pnpm
pnpm install mitt

2）局部注册，创建mitt.js文件（实例化mitt，并对外暴露）

//引入emitt
import mitt from "mitt"
// 调用emitt得到emitter，emitter能：绑定事件，触发事件
const emitter = mitt()
export default emitter

全局注册的话，在man.js内引入mitt，并创建mitt实例，再将其挂载到Vue的全局属性上  

3）在需要使用的vue文件中导入emitter

import emitter from './mitt'

4）mitt核心语法

订阅事件（监听）

使用.on方法订阅（监听）一个或多个事件。当事件被触发时，指定的回调函数将被执行。

// 监听名为'foo'的事件  
emitter.on('foo', (e) => {  
  console.log('foo event triggered', e);  
})
// 监听所有事件（使用'*'作为通配符）  
emitter.on('*', (type, e) => {  
  console.log(`${type} event triggered`, e);  
})

发布事件（触发）

使用.emit方法发布（触发）一个事件。可以传递任意数量的参数给监听该事件的回调函数。

// 触发名为'foo'的事件，并传递一个对象作为参数  
emitter.emit('foo', { a: 'b' });

取消订阅

使用.off方法取消订阅（移除）之前通过.on方法添加的事件监听器。

// 假设有一个名为onFoo的回调函数  
function onFoo(e) {  
  console.log('foo event handled', e)
}  
// 订阅事件  
emitter.on('foo', onFoo)
// 取消订阅  
emitter.off('foo', onFoo)
// 或者，如果你没有引用回调函数，可以取消所有监听'foo'事件的监听器  
emitter.off('foo')
// 取消所有事件的所有监听器  
emitter.all.clear()

命名空间

Mitt 支持命名空间，这有助于避免事件名称的冲突，并允许更精细地控制事件的监听和触发。

// 使用命名空间  
emitter.on('namespace/foo', (e) => {  
  console.log('namespaced foo event', e) 
})
  
emitter.emit('namespace/foo', { a: 'b' })

5）使用mitt的emit方法进行传值和on方法进行接收数据

// 组件A
bus.emit('函数名', 需要传的值)
//组件B
bus.on('函数名'，（接收到的值）=>{
	逻辑操作
})

示例：

代码：

父组件Parent.vue

<ChildA></ChildA>
<ChildB></ChildB>

<script setup>
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
</script>

子组件ChildA.vue

<p>我是子组件A,我有:{{ computer }}</p>
<p>我会收到：{{ receive }}</p>
<button @click="triggerFun">传computer</button>

<script setup>
import { ref ,onUnmounted} from 'vue'
import emitter from './mitt'
//数据
let computer = ref('电脑')
let receive = ref('无')
//给emitter订阅监听send-toy事件。接收数据
emitter.on('send-toy',(item)=>{
    receive.value = item.value
})
// 传递数据
function triggerFun(){
    //触发emitter监听的事件send-computer
    emitter.emit('send-computer',computer)
}
// 组件卸载时取消订阅。考虑内存和污染
onUnmounted(()=>{
    emitter.off('send-toy')
})
</script>

子组件ChildB.vue

<p>我是子组件B,我有:{{ toy }}</p>
<p>我会收到：{{ receive }}</p>
<button @click="triggerFun">传toy</button>

<script setup>
import { ref } from 'vue'
import emitter from './mitt'
let toy = ref('玩具')
let receive = ref('无')
function triggerFun(){
    //触发emitter监听的事件send-toy
    emitter.emit('send-toy',toy)
}
//给emitter订阅监听send-computer事件。接收数据
emitter.on('send-computer',(item)=>{
    receive.value = item.value
})
</script>

9.pinia

推荐参考：Vue状态管理工具：Pinia

可创建一个专用于组件通信的store

若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃

自求多芙
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
Vue组件通信的几种实现方法
10-17
以下几种方法是实现Vue组件间通信的常见方式： 1. 父子组件通信 在Vue中，父子组件之间的通信相对直接。父组件可以向子组件传递数据，而子组件则可以向父组件发送消息。 - 通过props向下传递数据：父组件通过在子...
vue组件通信
csD_Dscnnnnnnn的博客
03-22 1255
vue组件通信
常用的5种Vue组件通信方法
qq_38131840的博客
03-22 1449
Vue组件通信的常用方法
【前端高频面试题--Vue组件通信篇】
qq_45832651的博客
02-08 1865
最全最新Vue组件间通信，面试必问的高频题，等你来看！
vue组件通信provide/inject
m0_56219678的博客
10-05 801
vue组件通信provide/inject，解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
Vue组件通信
low神
07-16 909
父子级通信推荐使用：props/$emit、$parent/$children/$refs、$attrs/$listeners 兄弟组件通信推荐使用：$emit/$on、Vuex 无关系组件通信推荐使用：$emit/$on、Vuex、$attrs/$listeners、provide/inject 1、props和$emit（父子组件通信） 子组件使用prop...
vue组件间通信
热门推荐
江拥羡橙的博客
09-16 3万+
本章我们将介绍组件间是如何实现数据通信的。包括父组件向子组件、子组件向父组件、兄弟组件、非关系组件之间的数据通信。组件通信是组件式开发中非常重要的一部分，也是组件式开发中的难点。在学完本章之后，同学们可以通过反复地编写组件来加深印象。组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信，接下来让我们一个个介绍这几种类别的组件通信是如何实现的。
Vue组件通信之bus详解
kirinlau的专栏
11-28 3072
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
Vue组件通信的六种方式
好的文章我尽力写，大家的学习我尽力帮
02-02 2万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
vue 组件通信的几种方式
piaojiancong的博客
02-28 6200
vue组件通信的N种方式。
Vue组件通信详解
m0_63229717的博客
05-18 673
props是单向绑定的，当父组件传递的数据发生变化时子组件props也会更新为最新值。通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果。通过ref绑定组件可以通过this.$refs.name获取当前组件实例，可以使用组件的方法。（3）静态props传入的值不会发生变化，父组件中定义，子组件使用。子组件通过$emit事件给父组件传递值，父组件通过props属性传值给子组件。也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。
Vue组件通信的四种方式汇总
11-27
本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...
avue-crud 自定义搜索项 插槽
qq_31683775的博客
08-20 215
加上 -search 就可以自定义查询项了。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1221
Vue 生命周期详解、面试常问问题案例 含 demo
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件
我是Superman丶的博客
08-19 173
【前端】VUE动态引入组件 通过字符串动态渲染模板。
【vue3】组件通信
aaaa_aaab的博客
08-19 553
1. 概述：自定义事件常用于：**子 => 父。**2. 注意区分好：原生事件、自定义事件。● 原生事件：● 事件名是特定的（ click 、 mosueenter 等等）● 事件对象 $event : 是包含事件相关信息的对象（ pageX 、 pageY 、 target 、 keyCode ）● 自定义事件：● 事件名是任意名称● 事件对象 $event : 是调用 emit 时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：-->
Vue动态设置背景颜色
最新发布
m0_45306991的博客
08-21 265
的类名，并给他设定一个白色的背景颜色。然后，在Vue模版中，通过使用v-bind指令将“active”类名绑定到元素上，这样就能实现动态绑定的背景颜色。当isActive为false时，“active”类名将不会被应用，背景颜色还原为默认颜色。:style***后面的值是一个JavaScript对象，对象的属性名是CSS属性名，属性值是对应的CSS属性值。可以使用Vue的动态绑定语法来设置元素的样式。一种方案是使用类名的方式动态绑定背景颜色。在上述代码中，使用Vue的动态绑定语法***:style。
Vue UI - 可视化的Vue项目管理器
独泪了无痕
08-17 996
这一步在选择项目所需的配置项时，就很直观了。页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；
vue组件通信友谊聊吧
04-23
关于 Vue 组件通信, 我可以为您提供一些解决方案。Vue 组件通信是指在一个 Vue 应用程序中，不同组件之间共享数据或将数据从一个组件传递到另一个组件的过程。其中包括父组件向子组件传递数据、子组件向父组件传递数据、兄弟组件之间的传递以及跨级组件的传递等等。 以下是一些解决方案： 1. 父子组件通信：可以通过 props 属性将数据从父组件传递到子组件；父组件也可以通过 $emit 事件来监听子组件的事件，并进行相应的操作。 2. 子父组件通信：可以通过在子组件中调用 $emit 触发事件，并将需要传递的数据作为参数传递给父组件；父组件则可以通过在自身 template 中使用 v-on 或 @ 来监听子组件的事件，并进行相应的操作。 3. 兄弟组件通信：可以通过使用一个共享的数据对象或一个 Vue 实例来实现兄弟组件之间的通信；也可以使用事件总线或 Vuex 进行组件之间的通信。 4. 跨级组件通信：可以通过 props 属性或 provide/inject 实现父子组件之间的传递；也可以使用事件总线、 Vuex 或自定义插件来实现跨级组件之间的通信。 以上是一些常见的解决方案，您可以根据具体的场景选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值