福州网站建设哪家公司好,文山网站建设兼职,网站导航栏目设计内容依据,制作花灯文章目录 一、组件事件与v-model配合使用二、组件数据传递#xff08;子传父#xff09;三、插槽Slots四、具名插槽五、插槽中的数据传递 一、组件事件与v-model配合使用
组件A的数据变化 组件B可以实时显示
templateh3Main/h3p搜索内容为… 文章目录 一、组件事件与v-model配合使用二、组件数据传递子传父三、插槽Slots四、具名插槽五、插槽中的数据传递 一、组件事件与v-model配合使用
组件A的数据变化 组件B可以实时显示
templateh3Main/h3p搜索内容为:{{search}}/pcomponent-b searchEventgetSearch/component-b
/templatescript
import ComponentB from /components/componentB;
export default {name: componentA,components: {ComponentB},data(){return{search:}},methods:{getSearch(data){this.searchdata}}
}
/scriptstyle scoped/styletemplate搜索: input typetext v-modelsearch
/templatescript
export default {name: componentB,data(){return{search:}},//侦听器watch:{search(newvValue,oldValue){console.log(oldValue)this.$emit(searchEvent,newvValue)}}
}
/scriptstyle scoped/style二、组件数据传递子传父
利用父组件的函数回调
templateh3Main/h3p搜索内容为:{{search}}/pcomponent-b searchEventgetSearch :onEventdataFn/component-bpthis:{{message}}/p
/templatescript
import ComponentB from /components/componentB;
export default {name: componentA,components: {ComponentB},data(){return{search:,message:}},methods:{getSearch(data){this.searchdata},dataFn(data){this.messagedata}}
}
/scriptstyle scoped/styletemplate搜索: input typetext v-modelsearchp{{onEvent(age)}}/p
/templatescript
export default {name: componentB,data(){return{search:,age:22}},//侦听器watch:{search(newvValue,oldValue){console.log(oldValue)this.$emit(searchEvent,newvValue)}},props:{onEvent:Function}
}
/scriptstyle scoped/style三、插槽Slots
解决的是组件传输一个完整的html结构 也就是一个模板内容
templateparent-demo/parent-democomponent-a/component-aslot-demodivh3插槽标题/h3
!-- 插槽内容不是写死的 而是动态的--p{{ message }}/p/div/slot-demo
/templatescriptimport ParentDemo from /components/parentDemo;
import ComponentA from /components/componentA;
import SlotDemo from /components/slotDemo;
export default {name: App,components: {SlotDemo, ComponentA, ParentDemo},data(){return{message:hello}}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
templateh3插槽基础知识/h3
!-- slot 是一个插槽的出口 标示了 父元素提供的插槽内容将要在哪里被渲染 --
!-- 如果没有传插槽 在标签中间的内容 就是默认值--slot插槽默认值/slot
/templatescript
export default {name: slotDemo
}
/scriptstyle scoped/style四、具名插槽
templateparent-demo/parent-democomponent-a/component-aslot-demo
!-- 通过template中的 v-slot属性 和 slot标签的 name对应 --
!-- v-slot的简写 可以 简写为# --template v-slot:headerh3插槽标题/h3/templatetemplate #mainp{{ message }}/p/template/slot-demo
/templatescriptimport ParentDemo from /components/parentDemo;
import ComponentA from /components/componentA;
import SlotDemo from /components/slotDemo;
export default {name: App,components: {SlotDemo, ComponentA, ParentDemo},data(){return{message:hello}}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
templateh3插槽基础知识/h3
!-- slot 是一个插槽的出口 标示了 父元素提供的插槽内容将要在哪里被渲染 --
!-- 如果没有传插槽 在标签中间的内容 就是默认值--slot nameheader插槽默认值/slothrslot namemain/slot
/templatescript
export default {name: slotDemo
}
/scriptstyle scoped/style五、插槽中的数据传递
在某些情况下插槽的内容可能同时需要用到父子两个组件的数据所以需要方法将子组件在渲染时候将一部分数据提供给插槽
templateparent-demo/parent-democomponent-a/component-aslot-demo
!-- 通过template中的 v-slot属性 和 slot标签的 name对应 --
!-- v-slot的简写 可以 简写为# --template v-slot:headerh3插槽标题/h3/templatetemplate #mainp{{ message }}/p/template/slot-demoSlotAttr
!-- 建议指明对应的插槽名称--template v-slot:mainslotPropsp{{currentTest}}/pp{{slotProps.msg}}/p/template/SlotAttr
/templatescriptimport ParentDemo from /components/parentDemo;
import ComponentA from /components/componentA;
import SlotDemo from /components/slotDemo;
import SlotAttr from /components/slotAttr;
export default {name: App,components: {SlotAttr, SlotDemo, ComponentA, ParentDemo},data(){return{message:hello,currentTest:测试内容}}
}
/script
templateh3插槽plus/h3
!-- 子元素的数据想要显示 则需要将数据传给父元素父元素接收后和父元素原本的内容 一起传给子元素
--slot :msgchildMessage namemain/slot
/templatescript
export default {name: slotAttr,data(){return{childMessage:子组件数据}}
}
/scriptstyle scoped/style
