vue slot作用域插槽,vue3 slot插槽

　　文章目录Vue插槽插槽使用插槽插槽基本使用范围插槽使用

　　Vue插槽插槽插槽基本使用插槽用例代码！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge scriptsrc= 3359cn.jsdelivr.net/npm/vue/dist/vue.js/scripttitle slot slot real column/title style/style/style-组件栏，不填写任何内容，显示组件中所有槽的默认内容- cnp/cnp！-组件中的内容将缺省填充缺省槽位-cnpspan I将替换缺省槽位/span /cnp！-标题槽可以用指定名称填充-CNP span slot= left I替换左边槽/span slot= center I替换中间槽/span slot= right I替换右边槽/span /cnp /div！-component template-template id= CNPC div slot name= left 我是左槽/slot name= center 我是中间槽/slot name= right 我是右槽/slot/slot/div/template script const app=new Vue({ El: # app ，data: { }，Components:{//Register component CNP: # CNPC } })/script/body/html case代码输出效果，我是左槽，我是中间槽，我是默认槽，我是我将替换默认插槽，我将替换左侧插槽，我将替换中间插槽，我将替换右侧插槽，我将使用默认插槽范围插槽。

　　应用场景：父组件中定义的槽中的数据显示方式。

　　该插槽使用：data=pLangauges 将组件中的数据传输到父组件。

　　当在父组件中使用组件时，模板代码用于替换插槽内容，插槽传输的数据通过slot-scope=slot 接收

　　范围插槽用例代码

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge scriptsrc= 3359cn.jsdelivr.net/npm/vue/dist/vue.js/scripttitle slot slot real column/title style/style/style-使用组件栏，不填充任何内容，显示组件中所有插槽的默认内容-pDefault显示效果/p cnp/cnp！-获取父组件中slot传入的数据并通过自定义显示- p自定义显示效果/p CNP模板slot-scope= slot slot= myslot ！-span v-for= item in slot . data { { item } }//span-span { { slot . data . join(-)} }/span/template/CNP/div！-组件模板-模板id= CNPC div！-通过以下方式将数据从组件传递到父组件：data= plangages -slot name= my slot :data= plangages ul Li v-for= item in plangages { { item } }/Li/ul/slot/div/template script const app=new Vue({ El: # app ，data: { }，components:{ CNP: # cnpC ，data(){ return { plangages:[ Javascript ，Java ， Python ， C ， PHP ， Go } } })/script/body/html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。