vue处理边界情况

一、访问元素&组件

1、访问根实例

根实例：

 1 new Vue({
 2   data: {
 3     foo: 'foo'
 4   },
 5   computed: {
 6     bar: function () {
 7       return 'bar';
 8     }
 9   },
10   methods:{
11     baz(){
12       return 'baz';
13     }
14   },
15   el: '#app',
16   router,
17   store,
18   render: h => h(App)
19 })

子组件：

 1 <template>
 2   <div>
 3     <p>foo:{{this.$root.foo}}</p>
 4     <input type="text" v-model="foo">
 5     <p>bar:{{this.$root.bar}}</p>
 6     <p>baz:{{this.$root.baz()}}</p>
 7   </div>
 8 </template>
 9 
10 <script>
11   export default {
12     data() {
13       return {
14         foo: "",
15       }
16     },
17     watch:{
18       foo(val){
19         this.$root.foo = val;
20       }
21     },
22     methods: {
23     }
24   }
25 </script>

页面展现：

 

 输入数据，改变foo值：

posted @ 2019-12-16 16:58  lhjfly  阅读(491)  评论(0)  编辑  收藏  举报