parent.vue
定义了1个方法和2个数据
<template> <div class=""> 这是父组件 {{message}} </div> </template> <script> export default { name: 'Parent', data() { return { message: "Hello Vue", sayHello: "Parent say hello" } }, methods:{ showMessage(){ alert(this.sayHello + this.message); } }, } </script>
child.vue
继承父组件，使用父组件中的方法，并覆写父组件中的数据
<template> <div class=""> 这是子组件 {{message}} <button @click="showMessage">点击</button> </div> </template> <script> import Parent from "./Parent.vue"; export default { name: 'Child', extends: Parent, data(){ return{ sayHello: "Child say hello" } } } </script>
about.vue
调用child组件
<template> <div class="about"> <h1>这是about</h1> <Child/> </div> </template> <script> import Child from "./Child.vue"; export default { name: "About", components:{ Child }, } </script>
实现效果，父组件的方法取得了子组件覆写过的数据
