vue中有多种组件,父组件、子组件、兄弟组件等,这些组件之间的传值方式也是不同得
1.父组件传值给子组件
这种传值方式比较简单,子组件只需用props将父组件传递过来的数据接收,即可使用
父组件代码:
<p>这是父组件</p>
<input type="text" v-model="parentData">
<Childrenfrt :parentData="parentData" ></Childrenfrt>
子组件代码:
props: {
parentData: { type: String, required: true }
},
此时子组件中已经收到了父组件传来的数据
2.子组件传值给父组件
子组件传值给父组件需要通过一个自定义得方法,父组件监控这个方法来获得子组件传过来的值。子组件通过this.$emit将数据放在setData方法中,父组件通过监控setData这个方法将值取出。
子组件代码:
<p><input type="text" v-model="children1Data"></p>
<p><button @click="sentChildData">点击传值给父组件</button></p>
export default {
name: 'Childrenfrt',
data() {
return{
children1Data: ''
}
},
methods: {
sentChildData() {
this.$emit('sentData', this.children1Data)
}
}
}
</script>
父组件代码:
<Childrenfrt @sentData="sentData"></Childrenfrt>
<script>
export default {
name: 'Index',
data() {
return{
childData: ''
}
},
methods: {
sentData(val) {
this.childData = val
}
}
}
</script>
3.兄弟组件之间传值
兄弟组件指的是平级之间的组件,他们中得传值方式比较多
1.第一种是属于一种比较麻烦的方法,可以将值先传给父组件,再通过父组件传值给子组件得传值方式传值给另一个子组件
2.可以使用Bus事件总线,创建一个中转站来进行传值。
创建一个bus文件夹,在文件夹中新建index.js文件
import Vue from 'vue'
const Bus = new Vue()
export default Bus
在main.js中引用
import Bus from './bus/Bus'
Vue.prototype.$bus = Bus // 在vue原型上添加$bus属性
在方法中使用:通过 this.$ bus.$emit将值放入setDataToBrather中
this.$bus.$emit('setDataToBrather', this.children1Data) // 第一个参数是自己创建的方法名,第二个参数是要传递得数据
取值得方法:通过$on将值取出,第一个参数还是之前传递的方法名,第二个参数是一个函数,函数中得参数就是传递得值,最后别忘了在beforeDestroy钩子函数中将这个线程关闭
created() {
this.$bus.$on('setDataToBrather', (val) => {
this.ChildrenSecData = val
})
},
beforeDestroy() {
this.$bus.$off('setDataToBrather')
}
4. vuex传值
vuex是一种状态管理模式,相当于将值都放在仓库里保管,想用时,直接从仓库里取出来就行了
如下列
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
childData: ''
},
mutations: {
setChildData (state, val) {
state.childData = val
}
},
})
在vuex得state仓库中,创建了childData,给了一个空值,如果需要赋值,需要通过commit将值传给mutation,再由mutation赋给state中得childData
当需要传值时:
sentDataUseVuex() {
this.$store.commit('setChildData', this.children1Data) // 第一个参数时mutation中得方法名,第二个参数是需要传递得数据
}
当需要取值时:
this.$store.state.childData
这样就能将存储在vuex中得值取出来了。