Vue 组件的静态方法（自用）

一、例子

父组件 Parent.vue

<template>
    <div></div>
</template>
<script>
import Child from '../Child.vue'
export default {
    name: 'Parent',
    data() {
        return {}
    },
    mounted() {
        // 调组件的静态方法
        Child.getTest();
        // 子组件的实例
        console.log(new ChildTemplate());
    }
}
</script>

子组件 Child.vue 

<template>
    <div></div>
</template>
<script>
export default {
    name: 'Child',
    data() {
        return {
            test: '这是一个测试'
        }
    },
    methods: {        
    },
    getTest() {
        console.log(this, this.test, this.$data.test);
    }
}
</script>

二、重点

1、父组件调子组件的静态方法 Child.getTest();

2、子组件定义的静态方法不在 methods 中；

3、组件 和 组件实例：

4、静态方法 getTest() 中的 this ， this 是组件本身，而不是组件的实例 

4、父组件中 new 子组件，也就是组件的实例：

// 不懂为啥 后面要加一个 Template
new ChildTemplate()