手机网站安装,长春百度关键词搜索,佛山建设小学网站,百度2023免费下载父控件 使用子控件时#xff0c;为了能让子控件 在控件上面使用灵活多变#xff0c;这里使用插槽。 简单插槽使用 script// 创建 vue实例const app Vue.createApp({ data() { return {text: 提交 } },// slot 插槽// slot 中使用的数据#xff0c;作用域的问题为了能让子控件 在控件上面使用灵活多变这里使用插槽。 简单插槽使用 script// 创建 vue实例const app Vue.createApp({ data() { return {text: 提交 } },// slot 插槽// slot 中使用的数据作用域的问题// 父模版里调用的数据属性使用的都是父模版里的数据// 子模版里调用的数据属性使用的都是子模版里的数据template: myformdiv{{text}}/div/myformmyformbutton{{text}}/button/myform});// 自定义组件 myformapp.component(myform, {methods: {addOne() {alert(123)},},// slot 无法绑定事件// 解决方案 在 slot外层包裹 控件// 解决 父组件往子组件 添加控件 使用dom template: div input /span clickaddOneslot/slot/span/div});const vm app.mount(#root);/script插槽 作用域 为了让父控件灵活创建子控件 script// 创建 vue实例const app Vue.createApp({ data() { return {text: 提交 } },// 作用域插槽template: listView v-slotslotPropsspan{{slotProps.item}}/span/listView});// 自定义组件app.component(listView, {data() {return{list:[1,2,3],}},template: div slot v-foritem in list :itemitem //div});const vm app.mount(#root);/script具名插槽使用 script// 创建 vue实例const app Vue.createApp({ data() { return {text: 提交 } },// 具名插槽template: myformtemplate v-slot:headerdivheader/div/templatetemplate v-slot:footerdivfooter/div/template/myform});// 自定义组件app.component(myform, {// slot 无法绑定事件// 解决方案 在 slot外层包裹 控件// 解决 父组件往子组件 添加控件 使用dom template: div slot nameheader/slotdivcontent/divslot namefooter/slot/div});const vm app.mount(#root);/script插槽使用简单介绍更高级的使用后面会详细介绍。