标签：method mes return 回调 now() amp var 方式 写入
（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:‘父级组件实例数据‘
}
})
.
标签：method mes return 回调 now() amp var 方式 写入
原文地址：https://www.cnblogs.com/jianxian/p/10611972.html
