vue处理边界情况

一、访问元素&组件

1、访问根实例

根实例：

new Vue({
  data: {
    foo: 'foo'
  },
  computed: {
    bar: function () {
      return 'bar';
    }
  },
  methods:{
    baz(){
      return 'baz';
    }
  },
  el: '#app',
  router,
  store,
  render: h => h(App)
})

子组件：

<template>
  <div>
    <p>foo:{{this.$root.foo}}</p>
    <input type="text" v-model="foo">
    <p>bar:{{this.$root.bar}}</p>
    <p>baz:{{this.$root.baz()}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: "",
      }
    },
    watch:{
      foo(val){
        this.$root.foo = val;
      }
    },
    methods: {
    }
  }
</script>

页面展现：

 输入数据，改变foo值：