class-ts-扩展方法-Vue+TS-使用的问题(持续更)

  classts扩展方法Vue+TS使用的问题(持续更)  [TOC]引入问题引入.vue问题带来的问题在项目目录下添加vue-shims.d.ts文件,文件内容为declaremodule'*.vue'{importVuefrom'vue';exportdefaultVue}在兄弟组件之间传值的时候会引入一个引导者,这时候就需要引入一个.vue文件,例如import{eventBus}from"../main.ts";编译期间可能会报以下错误,但是浏览器会正常运行Animportpathcannotendwitha'.ts'extension.Considerimporting'../main'instead导入路径不能以“.ts”扩展名结尾。请考虑导入'../main'当我们改成这种情况,编译期间不会报错,可是浏览器报错,这就让人很头疼import{eventBus}from"../main";解决办法:在webpack.config.js中添加扩展名resolve:{extensions:['.js','.ts','.vue','.json']}引入文件格式如下import{eventBus}from"../main";组件之间通信父传子父组件给子组件传递'属性',子组件使用prop接收父组件import{Component,Vue}from"vue-property-decorator";importxmSonfrom'xmson路径'//引入子组件@Component({//挂载子组件components:{xmSon}})子组件import{Component,Vue,Prop}from"vue-property-decorator";@ComponentexportdefaultclassSonextendVue{@Prop()parentName!:string//接收父组件的参数sonName:string=this.parentName}子传父子组件通过事件给父组件发送消息($emit)父组件import{Component,Vue}from"vue-property-decorator";importxmSonfrom'xmson路径'//引入子组件@Component({//挂载子组件components:{xmSon}})exportdefaultclassSonextendVue{msg!:stringbindSonMsg(msg:string){//实现代码逻辑this.msg=msg}}子组件import{Component,Vue,Prop}from"vue-property-decorator";@ComponentexportdefaultclassSonextendVue{msg:string='来自:子组件的消息'//sonMsg为父组件引用子组件上的绑定的事件名称//也就是说父组件需要在子组件标签上绑定sonMsg事件//@sonMsg="待实现的函数"@Emit('sonMsg')sendToParent(){//实现sendToParent函数returnthis.msg}}兄弟组件之间的传值一般来说,子组件之间是无法直接交流的,这是因为Vue中的数据通信都是单向的,也就是说数据只会从父流向子或者反过来,无法在子组件直接通信父组件给出一些可执行方法(父通过prop下发起callback的函数给子)它们是prop提供的,而在执行这些方法时,数据就会被传回父组件(子组件使用callback函数回传数据),或者可以通过自定义事件来将数据发回监听这个事件的父组件,最后父组件就可以将更新过后的数据传递给其他子组件我们也可以创建一个通道来实现兄弟之间的通信main.ts//一定!必须!在Vue实例之前创建连接通道exportconsteventBus=newVue()newVue({render:h=>h(App),}).$mount('#app')Son1.vueimport{Component,Vue}from'vue-property-decorator';import{eventBus}from'../../main';@ComponentexportdefaultclassServerDetailsextendsVue{server:object[]created(){//给通道上绑定一个事件eventBus.$on('serverSelected',(server)=>{this.server=server})}}Son2.vueimport{Component,Vue,Prop,Emit}from'vue-property-decorator';import{eventBus}from'../../main';@ComponentexportdefaultclassServerItemextendsVue{name:'Server'@Prop()server!:object[]//使用自定义事件接受@Emit('serverSelected')serverSelected(){returnthis.server}}; -全文完-