Vue.js中如何调用Component中的函数和变量
Posted
技术标签:
【中文标题】Vue.js中如何调用Component中的函数和变量【英文标题】：How to call functions and variables in Component in Vue.js 【发布时间】：2018-10-26 22:38:28 【问题描述】：我有两段代码： index.html
<!DOCTYPE html>
<html>
......
<body>
<div id="app" v-cloak>
<div class="pages">
<page_0 v-if="Page==0"></page_0>
</div>
<div class="buttons">
......
<button v-if="isOpen(3)" class="button-blue" @click="Reset()">Reset</button>
</div>
</div>
<script src="js/vue.js"></script>
<script src="vue/page_0.js"></script>
......
<script type="text/javascript">
var app=new Vue(
el: '#app',
data:
Page: 0
,
methods:
......
Reset: function()
switch(this.Page)
case 0:
//Here I want to call function Reset() in component 'page_0'
......
)
</script>
</body>
</html>
page_0.js：
Vue.component('page_0',
......
methods:
Reset: function()
//The process of resetting data
,
......
)
有一个问题，当触发Vue对象'app'中的函数Reset时，我想在page_0中调用函数Reset()。我想知道该怎么做。
【问题讨论】：
【参考方案1】：首先，定义对子组件的引用
<page_0 ref="page0" v-if="Page==0"></page_0>
然后你可以直接从父级访问它的方法
this.$refs.page0.Reset();
详情在docs
【讨论】：
以上是关于Vue.js中如何调用Component中的函数和变量的主要内容，如果未能解决你的问题，请参考以下文章
函数事件（onChange）中的调用函数，来自在 Leaflet 和 Vue.js 中创建的 Select