.网站建设的目标,网站上qq未启用,产品经理如何看待网站开发,无锡网络营销推广插槽有三种#xff1a;
目录
1.普通插槽
2.具名插槽
3.作用域插槽 1.普通插槽
sub.vue 子组件 --- 子组件写slot标签#xff0c;父组件的Sub标签内填写的内容会显示在slot的位置#xff0c;父组件如果不写内容就会展示默认内容。
templatediv class…插槽有三种
目录
1.普通插槽
2.具名插槽
3.作用域插槽 1.普通插槽
sub.vue 子组件 --- 子组件写slot标签父组件的Sub标签内填写的内容会显示在slot的位置父组件如果不写内容就会展示默认内容。
templatediv classcardp这是子组件本身的内容/pslot这是默认内容--如果父组件不传值就会展示这些/slot/div
/template
index.vue 父组件
templatediv classcardSubh2我要传过去/h2/Sub/div
/template
展示效果 2.具名插槽
sub.vue 子组件 --- 用name属性定义每个插槽的名字
templatediv classcardp这是子组件本身的内容/pslot nameslot1这是第一个插槽/slotp穿插内容/pslot nameslot1这是二个插槽/slotp隔断内容/pslot nameslot1这是第三个插槽/slot/div
/template
index.vue 父组件 --- 父组件通过#号匹配子组件中对应的插槽位置
templatediv classcardSubtemplate #slot1h1传递内容1/h1/templatetemplate #slot2h2传递内容2/h2/templatetemplate #slot3h3传递内容3/h3/template/Sub/div
/template
展示效果
3.作用域插槽
sub.vue 子组件 --- message和count为子组件要传递给父组件的数据
templatediv classcardp这是子组件本身的内容/pslot message123 count1/slot/div
/template index.vue 父组件 --- 子组件传递过来的内容可以在父组件中使用比如列表中点击取值
templatediv classcardSub v-slotslotPropsh1传递内容{{ slotProps.message }} {{ slotProps.count }}/h1/Sub/div
/template
或者另一种写法---配合具名插槽
sub.vue 子组件
templatediv classcardp这是子组件本身的内容/pslot namename message123 count1/slot/div
/template
index.vue 父组件
templatediv classcardSubtemplate #nameslotPropsh1传递内容{{ slotProps.message }} {{ slotProps.count }}/h1/template/Sub/div
/template
展示效果
