使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
写在前面
之前写过一篇关于vue实现dialog会话框组件的文章//www.zwyuanma.com/article/139218.htm
讲到了如何实现一个vue对话框组件,其中涉及到了父组件和子组件的通信,这个不用多说,看我之前的文章就能明白,文章最后也说到了,我们可以使用slot插槽来编写组件,slot用来分发内容到子组件中,从而实现组件的高度复用,编写的组件更加灵活。
还是结合对话框的例子,使用slot来实现对话框组件
注册一个名叫dialog-tip的全局组件
Vue.component('dialog-tip', {
template: '#dialog-tip',
props:['dialogShow','message'],
data:function(){
return {
content:''
}
},
methods:{
}
});
使用templete标签来定义这个组件
请输入正确手机号
使用定义好的dialog组件请输入正确手机号
抱歉,没有此用户,请核实后输入