vue-组件传值总结

盛夏绽放

已于 2024-09-06 19:29:14 修改

阅读量1.9k

点赞数 36

文章标签： vue.js 前端 javascript 前端框架

于 2024-09-05 20:24:22 首次发布

本文链接：https://blog.csdn.net/x15514104477/article/details/141939380

版权

Vue.js中实现组件间传值的方法有多种。以下是几种常见的传值方式的详细讲解和示例：

1.父组件向子组件传值（props）

父组件通过props向子组件传递数据，子组件可以接收并使用这些数据。
当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用$emit。
声明和传递数据：在父组件模板中，使用v-bind指令（也可简写为:）将需要传递的数据绑定到子组件的prop上。例如，若父组件有一个message数据属性，希望传递给子组件，可以这样写：。这里my-prop是子组件暴露出来的一个prop名称。
接收和处理数据：在子组件中，需要声明一个props选项来接收父组件传递过来的数据。对于上面的例子，子组件可以这样定义： props: [‘myProp’] ;或者指定具体的类型:props: {myProp: String}

示例：

<!-- 父组件代码 -->
<template>
  <div>
    <child :inputName="name"></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data() {
    return {
      name: '来自父组件的数据'
    };
  }
}
</script>

<!-- 子组件代码：child.vue -->
<template>
  <div>
    {{ inputName }} <!-- 显示：'来自父组件的数据'-->
  </div>
</template>
<script>
export default {
  props: {
    inputName: String,
    required: true
  }
}
</script>

2.子组件向父组件传值（$emit）

子组件通过$emit触发自定义事件，并在父组件中监听这些事件来接收数据。
适用于子组件向父组件传递消息或数据。
子组件通过 $ emit 触发一个自定义事件，并传递数据作为参数，而父组件则通过监听这个事件来接收和处理数据。在子组件中，需要先在data中声明要传递的数据，然后通过methods定义一个本地方法来触发 $ emit。这个方法通常绑定在某个事件上，比如点击事件。当事件被触发时，$ emit会执行并发送数据到父组件。

示例：

<!-- 子组件代码：child.vue -->
<template>
  <button @click="notify">点击我</button>
</template>
<script>
export default {
  methods: {
    notify() {
      this.$emit('dataPassed', '来自子组件的数据');
    }
  }
}
</script>

<!-- 父组件代码 -->
<template>
  <div>
    <child @dataPassed="receiveData"></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    receiveData(data) {
      console.log(data); // 输出：来自子组件的数据
    }
  }
}
</script>

3.非父子组件间的传值（事件总线）

使用一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信。
优势：虽然父子组件之间可以通过props和事件进行直接通信，但非父子组件间的通信则要复杂得多。在这种情况下，中央事件总线提供了一种简便、轻量级的方案。它允许不同组件之间通过一个公共的Vue实例进行交互，从而避免了复杂的数据传递链路。

示例：

<!-- 事件总线 -->
<script>
export const EventBus = new Vue();
</script>

<!-- 组件A -->
<template>
  <button @click="sendData">发送数据</button>
</template>
<script>
import { EventBus } from './eventBus.js';
export default {
  methods: {
    sendData() {
      EventBus.$emit('send', '来自组件A的数据');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>接收到的数据：{{ receivedData }}</div>
</template>
<script>
import { EventBus } from './eventBus.js';
export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    EventBus.$on('send', data => {
      this.receivedData = data;
    });
  }
}
</script>

4.直接访问子组件（ref）

使用ref为子组件指定一个引用ID，然后在父组件中通过this.$refs直接访问子组件的公共属性和方法。
使用ref为子组件指定引用ID的方法简单明了：在子组件标签中添加ref属性，并为其赋予一个唯一的ID。在父组件中，通过this.$refs.{ID} 的形式来访问该子组件的实例。如果操作的是DOM元素，那么获取到的就是相应的DOM节点。
注意：虽然它主要应用于父子组件之间，但其灵活性和简洁性使得在特定情况下非常有效。需要注意的是，过度依赖这种方法可能会导致代码难以维护和测试，因此建议仅在必要时使用。

示例：

<!-- 父组件 -->
<template>
  <div>
    <button @click="getChildData">获取子组件数据</button>
    <child ref="myChild"></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    getChildData() {
      console.log(this.$refs.myChild.childData); // 访问子组件的公共属性
    }
  }
}
</script>

<!-- 子组件：child.vue -->
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  data() {
    return {
      childData: '这是子组件的内部数据'
    };
  }
}
</script>