详解某视频剪辑软件使用插槽分发内容狭槽的用法

将父组件的内容放到子组件指定的位置叫做内容分发

//在父组件里使用子组件son-tmpdiv我是文字，我需要放到son-tmp组件里面制定的位置/div/son-tmp单个插槽

父组件app.vue

模板div id='app '测试槽跨度我是父组件里的文字，但是我要被放到子组件里/span/test-slot/div/模板脚本从'导入测试槽./components/testSlot ' export default { data(){ return } }，components 3360 { testSlot } }/script style/style子组件testSlot.vue

模板div h3test-插槽/h3 //父组件里的跨度会替换掉狭槽所以这里的123是看不见的//如果父组件在使用子组件测试槽的时候不在里面加内容则这里的狭槽会显示出来插槽123/插槽/div/模板脚本导出默认{ data(){ return } }/脚本样式/样式效果图：

多个插槽也叫具名插槽

具名插槽就是将某个名字的内容插到子组件对应名字里面去

父组件app.vue

模板div id='app'//使用子组件测试槽测试-插槽//插槽=1这个差异会替换掉子组件里名称='一'的狭槽标签div slot='one' spanone/span span第一个/span /div /这个差异没有用狭槽指定名字所以会替换掉子组件里没有名字属性的狭槽标签差异跨度此差异没有插槽/跨度/div//插槽=两个这个差异会替换掉子组件里名称='二'的狭槽标签差异槽='二'跨度二/跨度跨度第二个/span/div/测试槽/div/模板脚本从'导入测试槽./components/testSlot ' export default { data(){ return } }，components 3360 { testSlot } }/script style/style子组件testSlot.vue

template div class=' testSlot ' div class=' nonslot ' slot/slot/div class=' test-two ' slot name=' two '/slot/div class=' test-one ' slot name=' one '/slot/div/div/template script export default { data(){ return } }/script style/style(9501 . 163.com)

作用域插槽（将子组件的值传到父组件供使用)

父组件app.vue

模板div id=' app ' h2app/H2测试-槽：项=' items '模板槽-范围=' props ' span { { props。addr } }/span span { { props }。cname } }/span span { { props }。从“”导入模板/测试槽./组件/测试槽。vue ' export default { data(){ return { items : [{ text : '文字1 '，cname:'tom '，addr:'usa' }，{ text: '文字2 '，cname: '吴王，addr: '英国}，{ text: '文字3 '，cname:'zhangsan '，addr:'un' } ] })，methods:{ }，components 3360 { Testslot } }/脚本样式/样式子组件testSlot.vue

模板div class=' hello ' slot : cname=' items[2].cname '/slot slot : addr=' items[2].addr '/slot slot age=' 18 '/slot/div/template script export default { data(){ return { num :100 } }，prop s 3360[' items ']，methods:{ }，created(){ console.log('items ')，这个.$道具。物品)；}}/scriptstyle作用域/style效果图：

以上所述是小编给大家介绍的某视频剪辑软件使用插槽分发内容狭槽的用法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！