vue2调用继承的组件的方法

在 Vue.js 中，父子组件之间的通信是常见的需求之一。如果你希望在一个子组件中调用父组件的方法或是在一个子组件里访问另一个继承自它的组件方法（比如通过 mixins 或者 extends 来复用代码），你需要遵循一定的规则。 ### 对于 `vue2` 继承的组件间如何调用方法： 1. **使用 `$parent` 访问父实例** 如果你想从子组件直接调用其直系父级组件上的方法，你可以利用内置属性 `$parent` 直接引用到父级组件实例上，然后像普通 JavaScript 方法那样去调用它们。 ```javascript // 子组件内部尝试调用父组件中的 sayHello 函数 this.$parent.sayHello(); ``` 2. **事件驱动的方式 (推荐)** 更好的实践方式是从子组件触发一个自定义事件，在父组件监听该事件并处理相应的逻辑。这使得数据流动保持单向性并且提高了可维护性和解耦能力。 - 在子组件内使用 `$emit()` 发送消息给父组件： ```html <!-- ChildComponent.vue --> <template> <button @click="sendMessage()">点击发送</button> </template> <script> export default { methods: { sendMessage() { this.$emit('childEvent'); } } }; </script> ``` - 在父组件注册这个事件并将它绑定到自己的某个处理器函数上面: ```html <!-- ParentComponent.vue --> <ChildComponent v-on:childEvent="handleMessageFromChild" /> <script> ... methods:{ handleMessageFromChild(){ console.log("收到子组件的通知"); // 执行更多操作... } } ... </script> ``` 3. **混入(Mixins) 和扩展(Extends)** 当你有一个复杂的基底功能集要共享时，可以考虑创建一个 mixin 文件或是设置 extend 去构建新的组件原型链。在这种情况下，所有被混合进来的或者作为后代生成的新组件都可以正常地访问公共的行为和状态了。 使用 `extends`: 创建基础组件 BaseComponent.vue 并定义一些通用行为；接下来让其他具体业务相关的子组件 SubComponent.vue “继承” 它们的基础配置选项。 ```js // BaseComponent.vue import Vue from 'vue'; const Base = Vue.extend({ data () { /* ... */ }, computed : {/*...*/}, methods:{/*...*/} }); export default Base; //SubComponent.vue import Base from './BaseComponent' export default{ extends: Base, mounted(){this.baseMethod()}// 可以这样来调用“基类”的method } ``` 4. **Ref 引用** 若要获取特定元素或嵌套式子孙组件内的 DOM 结点/实例，也可以借助特殊的 ref 属性标记目标对象以便后续查找定位。不过这种方式只适合某些特殊情况下的精准控制而不应该成为常规手段。 ```html <!-- Parent Component --> <child-component ref="myChild"></child-component> <script> export default { mounted() { this.$refs.myChild.someMethod(); // 这样就可以调用了 } } </script> ```