vue兄弟组件之间传值和方法调用

您所在的位置：网站首页 › vue组件调用另一个组件中的方法 › vue兄弟组件之间传值和方法调用

vue兄弟组件之间传值和方法调用

2023-08-15 08:49| 来源: 网络整理| 查看: 265

vue兄弟组件之间传值和方法调用

1.兄弟组件相互传值

1.1 vuex传值

实现效果：兄弟组件之间传值，child1的值发生变化，child2值也能随之发生变化

子组件一代码，child1.vue,点击button，连接store.js mutations中的changeTitle事件，进行更改值

更改title的值 {{title}} export default { data() { return { title: "" }; }, methods: { handleClickChangeTitle(title){ this.$store.commit("changeTitle",title) } } }

子组件二代码：child2.vue直接显示store.js中state中的值即可

store.js代码，

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { title: "" }, mutations: { changeTitle(state, title) { state.state = title; } } });

1.2 $emit传值，props接收

使用$emit将child1.vue的值给父组件，父组件将值传给child2.vue,child2.vue使用props接收

parent.vue

我是父组件 import child1 from "child1";//文件地址 import child2 from "child2";//文件地址 export default { data() { return { title: "" }; }, components: { child1, child2 }, methods: { handleClickChangeTitle(title){//将改方法传递给child1组件 this.title = title } } }

child1.vue

我是child1组件更改title的值 {{title}} export default { data() { return { title: "" }; }, methods: { handleClickChangeTitle(title){ this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件 } } }

child2.vue

{{ptitle}} export default { //接收父组件穿过来的值ptitle props:{ptitle:{ type: String}} }

1.兄弟组件相互调用方法

父组件代码

我是父组件 import child1 from "child1";//文件地址 import child2 from "child2";//文件地址 export default { data() { return { title: "" }; }, components: { child1, child2 }, methods: { handleClickSearch() { //header组件和home组件相互通信 this.$refs.changeTitle.changeTitle(); } } }

child1.vue代码

child2.vue代码

export default { methods: { changeTitle() { console.log("我是child2组件，changeTitle方法由child1组件触发") } } }

后期继续更新！

【本文地址】

vue兄弟组件之间传值和方法调用

vue兄弟组件之间传值和方法调用

今日新闻

推荐新闻