vue不得不了解的就是组件间的数据通信(暂且不谈vuex插件)。
通信方式根据组件之间的关系有不同之处。
组件关系有下面三种：父-->子、子-->父、非父子
1、父-->子
父向子传递数据用prop
<!--子组件代码-->
<template>
<div> {{message}} </div>
</template>
<script>
export default{
name="child",
prop: ['message'], //利用prop函数，定义一个"message"变量
data(){
}
}
</script>
<!--父组件代码-->
<template>
<v-child message="msg"> </v-child> <!--在这里传值-->
</template>
<script>
import Child from './child.vue'
export default{
name: 'parent',
components: { 'v-child': Child },
data(){
return{ msg:'hello world'
}
}
</script>
2.子组件给父组件传值（$emit） 子组件给父组件传值的中心思想是；通过方法传参，具体用法如下：
<!-- 子组件部分 -->
<script>
data(){
return{
msg: '123'
}
},
method: {
funcName: function(){
this.$emit("tanslate",this.msg)
//自定义一个tanslate和一个参数this.msg
}
}
</script>
父页面HTML部分： 通过子页面定义tanslate事件调用自定的tanslateText方法
<v-child v-on:tanslate="tanslateText"> </v-child>
父页面js部分：
method:{
tanslateText:function(text){ //text是字组件传过来的参数
console.log(text) //打印出子组件传递过来的参数
}
}
3.兄弟组件之间传值
创建一个store.js文件，注册Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//定义state，并将listName设置成一个空对象
const state = {
listName:{}
}
/定义mutations,可以传参数，用于设置state里的listName
const mutations = {
set_listname : (state, value) => {
state.listName = value ;
}
}
//定义getters,用于获取state里的对象
const getters = {
get_listname: state => {
return{ state.listName
}
}
export default new Vuex.store({
getters,
state,
mutations
})
在vue实例中注册store.js
//main.js
import Vue from 'vue'
import App from './App'
import store from './style'
new Vue({
el : '#app',
route,
store,
template: '<App/>',
components: {App}
})
后续补充完善