【關於vue,父組件觸發子組件裏面的方法】
瞭解什麼是組件?
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器爲它添加特殊功能。在有些情況下,組件也可以表現爲用 is 特性進行了擴展的原生 HTML 元素。
所有的 Vue 組件同時也都是 Vue 的實例,所以可接受相同的選項對象 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。
實際應用示例
子組件示例 child.vue
<!--
* 版權所有:xxxxxxx技術有限公司
* 描述:【關於vue,父組件觸發子組件裏面的方法】
* 作者:wangjj
* 版本 開發者 日期 描述
* 1.0.0.0 wangjj 2019/09/25 新建
-->
<template>
<div>
<!--比如說在另個頁面清除這個表格數據-->
<Table :columns="columnsTab" :data="tempData" :height="300" border stripe></Table>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
columnsTab: []
};
},
methods: {
/**
* 清除數據
*/
clearMethods () {
this.tempData = [];
}
}
};
</script>
<style scoped>
</style>
父組件示例
<template>
<div>
<button @click="clickParent">點擊</button>
<child ref="clearData"></child>
</div>
</template>
<script>
import Child from './child';
export default {
name: "parent",
components: {
child: Child
},
methods: {
//可在父組件中徹底刪除引入子組件的表格數據
clickParent() {
this.$refs.clearData.clearMethods();
}
}
}
</script>
需注意的幾點問題:
1、在子組件中:<div></div>是必須要存在的
2、在父組件中:首先要引入子組件 import Child from './child';
3、 <child ref="clearData"></child>是在父組件中爲子組件添加一個佔位,ref="clearData"是子組件在父組件中的名字
4、父組件中 components: { 是聲明子組件在父組件中的名字
5、在父組件的方法中調用子組件的方法,很重要 this.$refs.clearData.clearMethods();