vue处理边界情况

1、访问根实例

vue项目中的根实例在main.js文件中，初始代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

我们在里面添加data和methods属性，并且提供可访问的数据和函数，这样我们就可以在其他组件中，通过$root方式访问根实例了

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data:{
    rootMsg:"根实例1"
  },
  methods:{
    getRootMsg() {
      return "根实例2"
    }
  },
  components: { App },
  template: '<App/>'
})

在App.vue中进行取值

  </div>
 	{{ this.$root.rootMsg }}
    {{ this.$root.getRootMsg() }}
  </div>

效果如下

2、访问父级组件实例

在App.vue中定义一个属性parentMsg并赋值

data(){
    return{
      parentMsg:"父组件数据"
    }
  }

在其任意子组件中使用$parent取值即可

{{ this.$parent.parentMsg }}