房产网站建设产品,设计网站官网,保定医疗网站建设公司,广西外贸app一、事件总线
事件总线使用场景#xff1a; 两个兄弟组件之间的传参#xff0c;或者两个没有关联的组件之间的传参
html #xff1a;引入 publicmsg 与 acceptmsg 自定义组件 (自定义组件名称必须小写)
bodydiv idapppublicmsg/…一、事件总线
事件总线使用场景 两个兄弟组件之间的传参或者两个没有关联的组件之间的传参
html 引入 publicmsg 与 acceptmsg 自定义组件 (自定义组件名称必须小写)
bodydiv idapppublicmsg/publicmsgacceptmsg/acceptmsg/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typemodule src./js/templates.js/scriptscript srchttps://unpkg.com/mitt/dist/mitt.umd.js/script/bodyjs: 通过 emit(‘事件名称’,‘传递的参数’) 发布事件 on(‘事件名称’,回调函数) 监控事件
script
const emitter window.mitt()
const app Vue.createApp({})
app.component(publicmsg, {template:divinput typetext refpublicMessage/button clickpublicMsg()发布/button/div,methods: {publicMsg () {emitter.emit(messages, this.$refs.publicMessage.value)}}}).component(acceptmsg, {data () {return { acceptMesage: }},template: divp接收{{acceptMesage}}/p/div,mounted () {emitter.on(messages, msg {this.acceptMesage msg})}}).mount(#app)
/script二、动态组件
通过 component 标签 及 :is 属性动态选择显示的组件keep-alive 标签可以使得组件在切换时原组件被隐藏而不是被删除
html :
bodyscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typemodule src./js/11.动态组件.js/scriptdiv idappkeep-alivecomponent :ischooseValue/component/keep-aliveselect v-modelchooseValueoption valuecomponent1组件1/optionoption valuecomponent2组件2/optionoption valuecomponent3组件3/option/select/div
/bodyjs :
script
const app Vue.createApp({data () {return { chooseValue: component1 }},components: {component1: {template: divbutton组件1/buttoninput typetext//div},component2: {template: divbutton组件2/buttoninput typetext//div},component3: {template: divbutton组件3/buttoninput typetext//div}}
}).mount(#app)/script结果演示
A当前为组件1 输入文字后 -------------------------------------------------------------------------------------------
B:切换到组件2 -------------------------------------------------------------------------------------------
C:切回组件1 组件1输入的文字没有消失
