需要用到vue-class-component和vue-property-decorator
父组件
<template>
<div class="home">
<p>首页</p>
<p>{{message}}</p>
<button @click="myFn('父组件')">父组件</button>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<Son :parentdata="message" @parentfn="myFn"></Son>
</div>
</template>
<script >
// import Vue from 'vue'
// import Component from 'vue-class-component'
import {Vue,Component,Watch} from "vue-property-decorator";
import Son from '../components/Son'
@Component({
//如果类中找不到需要的添加的内容,那么可以写在这个地方
name:'Home',
components:{
Son
}
})
export default class Home extends Vue {
//数据绑定 通过类的方式,那么的类中的属性就是以前data定义的属性
message = 'www.LiHui666.com';
str = '123456789'
//定义方法 通过类的方式,那么的类中的方法就是以前methods中的方法
myFn(data){
alert(data);
}
//计算属性 通过类的方式,那么的类中的getter方法就是以前computer中的方法
get msg(){
console.log("执行了");
return this.str.split("").reverse().join("");
}
//第一个参数:需要观察的属性名称
//第二个属性:可选配置,如果deep:true,表示深度监听
@Watch('message',{deep:true})
messageChange(newValue,oldValue){
console.log(newValue, oldValue);
}
}
</script>
子组件
<template>
<div class="son">
<p>首页子组件</p>
<p>{{parentdata}}</p>
<button @click="sonFn">子组件方法</button>
</div>
</template>
<script >
import {Vue,Component,Prop,Emit} from "vue-property-decorator";
@Component
export default class Home extends Vue {
//接受父组件传递的值
@Prop(String) parentdata;
//接受父组件传递的方法 方式一通过声明
@Emit('parentfn')
sonFn(){
//方式二 emit传统接受
// this.$emit('parentfn','子组件');
return "子组件";
}
}
</script>