vue组件---边界处理情况

（1）访问元素&组件

①访问根实例

在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：

// Vue 根实例
new Vue({
  data: {
    foo:
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

/* 获取根组件的数据 */
this.$root.foo
/* 写入根组件的数据 */
this.$root.foo =
/* 访问根组件的计算属性 */
this.$root.bar
/* 调用根组件的方法 */
this.$root.baz()

案例demo：

    <!-- 访问根实例 -->
    <div class="root_area">
        <p>{{message}}</p>
        <p>数据倒置：{{reverseMessage}}</p>
        <button v-on:click="change" :title="title">方法1</button>
        <button v-on:click="transfer">调用方法1</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el:".root_area",
            data:{
                message:"展示信息",
                title:"鼠标悬停展示信息"
            },
            methods:{
                change:function(){
                    /* 1、写入根组件数据 */
                    this.$root.message = "写入根组件新数据";
                    this.$root.title = "写入根组件新数据-鼠标悬停展示信息"
                    /* 2、获取根组件数据 */
                    console.log(this.$root.message);
                    console.log(this.$root.title);
                },
                transfer:function(){
                    /* 3、调用根组件方法 */
                    this.$root.change()
                    /* 4、访问根组件的计算属性 */
                    console.log(this.$root.reverseMessage)
                }
            },
            computed:{
                reverseMessage:function(){
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

计算属性VS方法：

可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

②访问父级组件实例

和 $root 类似，$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

    <!-- 访问父级组件实例 -->
    <div class="parent_area">
        <parent-com></parent-com>
    </div>
        /* 父级组件实例 */
        Vue.component('parent-com',{
            template:`<div>
                        子组件数据展示
                        <button v-on:click="show_parent">子组件点击</button>
                    </div>`
            ,
            methods:{
                show_parent:function(){
                    console.log(this.$parent.message)
                }
            }
        })
        var parent_area = new Vue({
            el:".parent_area",
            data:{
                message:'父级组件实例数据'
            }
        })

③访问子组件实例或子元素

    <!-- 访问子组件实例或子元素  -->
    <div class="child_area">
        <child-com></child-com>
    </div>
        /* 访问子组件实例或子元素 */
        Vue.component('child-component',{
            template:"<span>我是子组件实例</span>"
        })
        Vue.component('child-com',{
            template:`
                    <div>
                        姓名：<input type="text" placeholder="请输入您的姓名"/>
                        <button v-on:click="getInfo">获取子组件</button>
                        <child-component ref="childSpan"></child-component>
                    </div>
                    `
            ,
            methods:{
                getInfo:function(){
                    console.log(this.$refs.childSpan);
                }
            }
        });
        new Vue({
            el:".child_area"
        })

④依赖注入

使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide和 inject。

 provide 选项允许我们指定我们想要提供给后代组件的数据/方法。然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性。

这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和 props 一样。

实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：

• 祖先组件不需要知道哪些后代组件使用它提供的属性
• 后代组件不需要知道被注入的属性来自哪里

　简单demo：

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

依赖注入demo案例：

    <div class="child_area">
        <child-com></child-com>
    </div>
        Vue.component('child-component',{
            template:`<span>我是子组件实例</span>`,
            inject: ['info1','info2','info3','info4'],
            /* 生命周期钩子 */
            beforeCreate(){
                console.log(this.info1);
            },
            created(){
                console.log(this.info2);
            },
            beforeMount(){
                console.log(this.info3);
            },
            mounted(){
                console.log(this.info4);
            }
        })
        Vue.component('child-com',{
            template:`
                    <div>
                        父级组件实例
                        <child-component></child-component>
                    </div>
                    `
            ,
            methods:{
                getInfo:function(){
                    console.log(this.$refs.childSpan);
                }
            },
            provide:{
                info1:"提供依赖--组件实例刚被创建",
                info2:"提供依赖--组件实例创建完成",
                info3:"提供依赖--模板挂载之前",
                info4:"提供依赖--模板挂载之后"
            }
        });
        new Vue({
            el:".child_area"
        })
    </script>

具体生命周期钩子，详看文章Vue2.0 —生命周期和钩子函数。

（2）程序化的事件侦听器（待验证-了解即可）

（3）循环引用（待验证-了解即可）

（4）模板定义的替代品（待验证-了解即可）

.