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

组件之间传值和方法调用"/>

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

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

1.兄弟组件相互传值

1.1 vuex传值

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

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

<template><div><input type="text"v-model="title"/><button type="button" @click="handleClickChangeTitle(title)">更改title的值</button><div>{{title}}</div></div>
</template>
<script>
export default {data() {return {title: ""};},methods: {handleClickChangeTitle(title){this.$storemit("changeTitle",title)}}
}
</script>

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

<template><div>{{$store.state.title}}</div>
</template>

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

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

child1.vue

<template><div><h2>我是child1组件</h2><div><input type="text"v-model="title"/><button type="button" @click="handleClickChangeTitle(title)">更改title的值</button><div>{{title}}</div></div></div>
</template>
<script>
export default {data() {return {title: ""};},methods: {handleClickChangeTitle(title){this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件}}
}
</script>

child2.vue

<template><div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitleprops:{ptitle:{ type: String}}
}
</script>

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

父组件代码

<template><div><h2>我是父组件</h2><child1 @handleClickChange="handleClickChangeTitle"></child1><child2 ref="changeTitle"></child2></div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {data() {return {title: ""};},components: {child1,child2},methods: {handleClickSearch() {//header组件和home组件相互通信this.$refs.changeTitle.changeTitle();}}
}
</script>

child1.vue代码

<template><div><h2>我是child1组件</h2><div><input type="text"v-model="title"/><button type="button" @click="handleClickChangeTitle(title)">更改title的值</button><div>{{title}}</div></div></div>
</template>
<script>
export default {data() {return {title: ""};},methods: {handleClickChangeTitle(title){this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件}}
}
</script>

child2.vue代码

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

后期继续更新！