首页<script> export default { methods: { ifComponent() { this.$emit('handleSetLineChartData', 'type1'); // 更新 LineChartData，并显示 line-chart 组件 this.$emit('handleSetSRChartData', 'type2'); } } } </script>

<script> export default { methods: { ifComponent() { this.$emit('handleSetLineChartData', 'type1'); // 更新 LineChartData，并显示 line-chart 组件 this.$emit('handleSetSRChartData', 'type2'); } } } </script>

时间: 2024-02-29 19:53:36 浏览: 45

vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式。父组件传值给子组件在 Vue 中，父组件可以通过 props 将数据传递给子组件。例如： // 父组件：parent.vue <template> <div> <child :vals="msg"></child> </div> </template> <script> import child from "./child"; export default { data() { return { msg: "我是父组件的数据，将传给子组件" } }, components: { child } } </script> // 子组件：child.vue <template> <div> {{ vals }} </div> </template> <script> export default { props: { vals: { type: String, default: "123" } } } </script> 子组件到父组件的通信子组件可以通过 $emit 触发事件，参数为自定义事件名称，写法可以是小写或者用 - 连接，例如 event 或 event-name。父组件可以通过 v-on 监听事件，获取数据。 // 父组件：parent.vue <template> <div> <child v-on:childevent='watchChildEvent'></child> <div>子组件的数据为：{{ msg }}</div> </div> </template> <script> import child from "./child"; export default { data() { return { msg: "" } }, components: { child }, methods: { watchChildEvent: function(vals) { console.log(vals); // 结果：这是子组件的数据，将有子组件操作触发传给父组件 this.msg = vals; } } } </script> // 子组件：child.vue <template> <div> <input type="button" value="子组件触发" @click="target"> </div> </template> <script> export default { data() { return { texts: '这是子组件的数据，将有子组件操作触发传给父组件' } }, methods: { target: function() { this.$emit('childevent', this.texts); // 触发一个在子组件中声明的事件 childEvnet } } } </script> 兄弟组件之间的通信兄弟组件之间可以通过 $emit 和 $on 实现通信。例如： // 兄弟组件 1：brother1.vue <template> <div> <input type="button" value="兄弟组件 1 触发" @click="target"> </div> </template> <script> export default { data() { return { texts: '这是兄弟组件 1 的数据，将有兄弟组件 1 操作触发传给兄弟组件 2' } }, methods: { target: function() { this.$emit('brotherevent', this.texts); // 触发一个在兄弟组件 1 中声明的事件 brotherevent } } } </script> // 兄弟组件 2：brother2.vue <template> <div> <div>兄弟组件 2 收到的数据：{{ msg }}</div> </div> </template> <script> export default { data() { return { msg: "" } }, mounted() { this.$on('brotherevent', function(vals) { console.log(vals); // 结果：这是兄弟组件 1 的数据，将有兄弟组件 1 操作触发传给兄弟组件 2 this.msg = vals; }); } } </script> Vue 中的 $emit 与 $on 是非常重要的函数，它们用于实现组件之间的数据传输。通过 props、$emit 和 $on，我们可以轻松地实现父子组件和兄弟组件之间的通信。

这是一个 Vue.js 组件的代码，其中定义了一个名为 "ifComponent" 的方法，该方法通过调用 $emit 方法触发了两个事件： "handleSetLineChartData" 和 "handleSetSRChartData"。这些事件可以被父组件监听，以更新 LineChartData 和 SRChartData 并显示相应的组件。

阅读全文