• this.$refs
  是一个对象，持有已注册过的所有子组件。 ref为子组件指定一个名称，通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作 （包括data中定义的数据和methods中定义的方法）
• this.$parent
  可以访问到父组件上所有的数据在子组件中使用
  注意
  当遇到this.$parent.数据获取父组件的数据得到undefined的情况时
  原因: 父组件在调用子组件的时候，在子组件的外层包裹了一层UI组件的某个组件
  解决

  //外层包裹了几个组件就需要用几个$parent
  this.$parent.$parent.数据
  

• this.$root
  可以直接操作当前组件的所有祖先组件的根组件
• this.$children
  是一个数组，可以操作当前组件的所有子组件

1.父传子

// 父组件
<Floating :title="str" ref="floating"></Floating>
// 子组件props接收
props:['title']
props:{
  // 表示传入的值是Number或者String类型
  content: [Number, String],
  // 传入布尔类型的值
  content: Boolean,
}
props: {
  title: {
    type: String, // 传递的类型
    required: true, // 值必传
    default: "我是默认的", // 默认传递的值
  },
}

2.子传父

使用$emit()

// 子组件使用$emit()
valueTransfer(){
  this.$emit('getValue','传递的值')
}
// 父组件接收
<Floating :title="str" ref="floating" @getValue="getValue"></Floating>

使用callback函数

// 父组件中定义一个callback函数
callback(name){
  alert(name)
},
// 将函数传到子组件
<Floating :callback=callback></Floating>
// 子组件接收并调用即可
props:{
  callback:Function
}
mycallback(){
  this.callback('传递的参数')
}

4.兄弟组件传值

// 1.子组件A通过$emit()，传递到父组件
  setA(){
    this.$emit('setName','我是组件A')
  }
// 2.父组件接收，并将传递的值传递给A2组件
<A1 @setName="setName"></A1>
setName(name){
  this.myName = name;
}
<A2 :myName="myName"></A2>

5.事件总线EventBus

注意

要及时移出不使用的eventBus

• 避免事件被反复触发
• 未及时移除的 eventBus 会导致内存泄漏
• 由于热更新，事件可能会被多次绑定监听

// 1.main.js中引入
Vue.prototype.$EventBus = new Vue()
// 2.通过EventBus中的$emit()来进行发送消息
setA() {
    this.$EventBus.$emit('setName','值1','值2','值3')
}
// 3.通过$on来进行监听监收消息
this.$EventBus.$on("setName", (a, b, c) => {});
// 4.移出不使用的EventBus(在页面销毁时移除事件监听)
this.$EventBus.$off('eventName');

6.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex (opens new window)

提示

Vuex3搭配Vue2 - Vuex4搭配Vue3

安装vuex

  npm install vuex --save vuex@3.4.0

创建vuex文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
   //存储全局变量的数据
    state:{
      count: 9,
    },
    // 用来提供获取state中的方法，相当于vue中的computed,也可以进行属性代理
    getters: {
        //es6新语法
        rideCount: state => {
            return state.count * 10;
        }
    },
    // Action 提交的是 mutations，而不是直接变更状态。
    // Action 可以包含任意异步操作。
    actions:{
      /**
       * 两种方式 commit提交到mutations中
       * **/
      addCityName({ commit, state }, name) {
        commit("addCitys", name)
      },
      getadd(context, num) {
          context.commit('addnum', num)
      },
    },
    // 提供存储设置state数据的方法，更改vuex中的store中的状态的唯一方法是提交mutations
    mutations: {
        addCitys(state,name){
            state.citys.push(name);
        },
        addnum(state) {
            state.count++;
        }
    }
})
// 每次调用mutation时候,都会进入到这个方法,用于数据的持久化
store.subscribe((mutation, state) => {
    localStorage.setItem('count', JSON.stringify(state.count))
})
export default store;

main.js中引用

new Vue({
  store
}).$mount('#app')

页面获取数据

• 页面中直接获取

<div>{{this.$store.state.count}}</div>             // 获取state数据
<div>{{this.$store.getters.appWithVersion}}</div>  // 获取getters中的数据

• 在computed中引用

computed:{
  list(){return this.$store.getters.getList}
}
// 直接调用即可
<span>{{list}}</span>

• 辅助函数mapstate

import { mapState } from 'vuex'
computed：{
  ...mapState(['num'])
}

调用vuex中方法

// 提交到actions中
this.$store.dispatch("changeCity", city);
// 提交到mutations
this.$store.commit('changCitys',city)

辅助函数

import { mapState, mapGetters, mapActions ,mapMutations} from "vuex";
// mapState  获取vuex中所有数据
// mapActions mapMutations 是在methods中获取
// mapGetters              是在computed中获取

//vuex中的state中的city映射到当地页面的计算属性里，映射过来的属性是current
...mapstate({current:'city'})
...mapGetters(["getnumber"]),
...mapMutations(["addnum", "getCount"]),
...mapActions(["addCityName"]),