使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
<h3 id="写在前面">写在前面
还是结合对话框的例子,使用slot来实现对话框组件
Vue.component('dialog-tip',{
template: '#dialog-tip',props:['dialogShow','message'],data:function(){
return {
content:''
}
},methods:{
}
});
组件内容包括两部分 ,一个是提示内容,一个是button按钮,我们将要修改替换的内容使用slot包含起来, 这样父组件就可以分发内容到子组件里面了。
除了默认插槽,还可以定义具名插槽 ,如果组件中有好几个部分内容需要替换,我们可以为它定义一个name,例如:
这样在使用组件的时候,指定slot的name ,就会将这一部分内容替换掉,而不会替换其他的插槽内容
如果不指定slot的名称,默认dialog-tip标签里面的内容会替换子组件中使用slot包含的内容部分,例如以上 使用slot指定了它的名称来替换子组件中的对应的slot部分,而没有使用slot指定名称的内容会默认将子组件中 没有定义具名插槽的部分内容替换掉。 需要注意的是,如果dialog-tip标签里没有定义需要分发的内容,那么子组件中会显示默认的插槽内容 关于更多的slot用法,请移步 效果图
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |