vue组件---边界处理情况
（1）访问元素&组件
①访问根实例
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：
// Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } })
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
/* 获取根组件的数据 */ this.$root.foo /* 写入根组件的数据 */ this.$root.foo = 2 /* 访问根组件的计算属性 */ 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）模板定义的替代品（待验证-了解即可）
.
