1.父组件传递数据给子组件
parent组件中：
<template lang="html">
<div class="">
<Child :message="message" /> //显示出来，并动态绑定数据
</div>
</template>
import Child from "../pages/child"; //引入子组件
data(){
return{
message:"我是parent传给child的信息" //初始化数据
}
},
components:{
Child //注册Child组件
},
Child组件中：
props:{
message:{
type:String,
default:""
}
}//用props接收数据，注意，它与data同级
2.子组件传递数据给父组件
Child组件中：
<template lang="html">
<button @click="sendmsg" type="button" name="button">send</button>
</template>
<script>
data(){
return{
msg:"我是来child的msg"
}
},
methods:{
sendmsg(){
this.$emit("getMsg",this.msg) //$emit自定义事件
}
}
</script>
parent组件中：
<template lang="html">
<Child @getMsg="getMsg" />
</template>
<script>
import Child from "../pages/child";
data(){
msg:""
},
components:{
Child
},
methods:{
getMsg(data){
this.msg=data;
}
}
</script>
3.非父子组件之间的通信
假设 bb 组件里面有个按钮，点击按钮，把 123 传递给 aa 组件
在main.js文件中：
// 根组件（this.$root)new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的实例放到根组件下，所有的子组件都能调用
Bus: new Vue()
}
})
bb 组件内调用事件触发↓
<button @click="submit">提交<button>
methods: { submit() { // 事件名字自定义，用不同的名字区别事件 this.$root.Bus.$emit('eventName', 123) } }
aa 组件内调用事件接收↓
// 当前实例创建完成就监听这个事件
created(){
this.$root.Bus.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在组件销毁时别忘了解除事件绑定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
问题一：如果有多个组件组件需要通信，只要保证事件名 （eventName）不一样就行了。
问题二：为什么要弄个 Bus？直接 this.$root.$on、this.$root.$emit 不更简单粗暴？
按照文档上的说法是专门用一个空的 Vue 实例（Bus）来做中央事件总线更加清晰也易于管理。
4.动态路由传递参数
1.配置路由信息，参数用：表示
path:"/hi/:id/:count"
2.配置路由跳转路径信息
<router-link :to="{ name:'hi',params:{id:'100',count:20} }">hi</router-link>
3.读取信息
{{ $route.params.键名 }}-{{ $route.params.键名}}
在router/index.js文件中配置路由
import Foo from '../pages/foo'
routes: [
{
path: '/foo/:name/:age',
component: Foo
}
]
在main.js中
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>' //第一层路由必须显示在App.vue中
})
在App.vue 中
<p>
<router-link to="/foo/lihua/18">/foo/username</router-link>
</p>
<router-view></router-view>
//『路径参数』：『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
APP.vue主组件中，内容上就只有<router-view></router-view>，然后在其他页面也有<router-view></router-view>，它是怎么传递的？
正常写法中，一层路径(/xxx)对应一个router-view。
比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)
- 那/a对应的就是App.vue中的router-view，/a进入a.vue中
- 那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中，以此类推。
4.vuex状态的共享
应用的场景有：购物车、登录/退出状态、音乐播放时候、复杂的折线图
在main.js中：
import store from "./store"
new Vue({
el: '#app',
router,
store, //注入store
components: { App },
template: '<App/>'
})
在store/index.js中
import Vue from "vue"
import VueX from "vuex"
Vue.use(VueX);
export default new VueX.Store({
//初始化仓库中的数据
state:{
},
actions:{
updataOrder(context,数据){
//提交到mutations中,第一个参数是mutions中函数，第二个是数据
context.commit("updataOrder",数据)
}
},
mutations:{
//计算操作，updataOrder方法中第一个参数是store初始化数据，第二个是页面传来的数据
updataOrder(state,data){
}
},
getters:{
// store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
//一般不直接的读取store.state
getOrder(state){
return state.order
}
}
})
在某个需要交互的组件中触发actions
methods:{
down(){
if(this.counter<=this.min){
return
}
this.counter--;
//分发到mutations中，用dispatch方法去触发，第一个参数是actions中方法，第二个是数据；
this.$store.dispatch("updataOrder", 数据);
}
}
在任一组建使用store.getters.方法名
<div class="">
{{getOrder}}
</div>
<script>
computed:{
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
getOrder(){
return this.$store.getters.getOrder;
}
}
</script>
VueComponent ->(dispatch) Actions ->(Commit) Mutations ->(Mutate) State ->(Render) -> VueComponent
6.vuex也支持Modules：
在store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import mutations from "./mutations"
import getters from "./getters"
import actions from "./actions"
Vue.use(Vuex)
// 创建Store
export default new Vuex.Store({
state:state,
mutations:mutations,
getters:getters,
actions:actions
})
在等待被引入的state.js中
export default {
//初始化state
}
在等待被引入的actions.js中
export default{
// 异步处理
adds(context，数据){
//异步操作，拿数据。
setTimeout(function(){
context.commit("add"，数据)
})
}
}
在等待被引入的mutations.js中
export default{
add(state,数据){
// 变更状态
state.count++
}
}
在等待被引入的getters.js中
export default {
// 数据过滤
getState(state){
if(state.count >= 0){
return state.count
}else{
state.count = 0
return 0
}
}
}
在任一组建使用store.getters.方法名
<div class="">
{{getOrder}}
</div>
<script>
computed:{
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
getOrder(){
return this.$store.getters.getState;
}
}
</script>