江阴高端网站建设,赣州同城网,闽候县建设局网站,做加盟正规网站官方的说明
渲染一个“元组件”为动态组件。依 is 的值#xff0c;来决定哪个组件被渲染。
!-- 动态组件由 vm 实例的属性值 componentId 控制 --
component :iscomponentId/component具体可以官网文档中的
动态组件内置的组件compone…官方的说明
渲染一个“元组件”为动态组件。依 is 的值来决定哪个组件被渲染。
!-- 动态组件由 vm 实例的属性值 componentId 控制 --
component :iscomponentId/component具体可以官网文档中的
动态组件内置的组件component
场景
这里通过一个业务场景来阐述vue内置component组件的应用。 如图所示这里展示经典注册页面注册分为邮箱注册和手机注册弹窗顶部有标签可以切换注册类型中间是注册表单信息邮箱注册和手机注册有着不一样的表单内容底部是注册按钮以及其他操作。 经过分析手机注册界面与邮箱注册除了中间的表单内容不一致之外其他的界面内容是一样的。 实际项目代码设计中为了保证复用性和可维护性是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。核心代码实现
顶部tab切换的时候type值发生改变对应的表单的组件也发生了变化
templatediva hrefjavascript:; click.preventhandleCloseBtnClick/adivh3新用户注册/h3divspan :class{active: type mobileForm} clicktype mobileForm手机注册/spanspan :class{active: type emailForm} clicktype emailForm邮箱注册/span/div/divcomponent :istype refformbutton clickhandleRegisterBtnClick注册/buttondiv span span注册视为同意/spana 《法律条款和隐私说明》/a/span/divdivspan已有账号a hrefjavascript:; click.preventhandleLoginBtnClick直接登入/a/span/div/component/div
/template
scriptexport default {methods: {handleRegisterBtnClick () {this.$refs.form.validateData().then(() {this.$refs.form.getFormData()})}}}
/scriptmixins混合
用Vue内置component组件情况下一般实际被渲染的组件具有一定的共性比如相同的属性相同的方法或者相同的初始化销毁过程。比如目前这个场景中邮箱表单和手机表单都具有校验方法validateData和获取表单数据方法getFormData。 这种情况下可以使用vue提供的混合的功能。进一步抽离 mixins.js
export default {methods: {validateData() {return Promise.resolve()},getFormData() {return {}}}
}email-form.vue
script
import minx from ./mixins
export default {mixins: [mixins],methods: {getFormData() {return { email: exampleexample.com }}}
}
/script如果有自定义的需求可以重写mixins中的方法。
表格的应用
在管理后台项目中表格经常会被用到。我们希望表格的td是文本、进度条、checkbox等等且希望通过传一个json配置就可以渲染出。使用vue内置的component组件可以起到很赞的作用。 比如这样的一个table使用方式templatevue-table reftable :columnscolumns :datumdatum/vue-table
/template
script
export default {data () {return {columns: [{ title: ID, width: 30, dataKey: id },{ title: 进度组件, dataKey: progress, render: { type: progress2, max: 100, precision: 2 } }],datum: [{ id: 1, name: 进度0, progress: 10 }]}}}
/scripttable中使用component的实现
td v-forcolumn of columnscomponent :is${TYPE_PRE}${columns.render.type} :row-datarowData :paramscolumns.render/component
/td表单的应用
在管理后台项目中表单也经常需要用到我们也同样希望表单的某一项是文本框下拉框时间选择框富文本等等等等且希望通过传一个json配置就可以渲染出。vue内置的component组件可以依然可以实现这样一个美好的愿景。 比如这样的一个form使用方式templatec-form :cellscells refformbutton classbutton is-primary :class{ is-disabled: isSubmitBtnDisabled } click.preventsubmit提交/button/c-form
/template
scriptexport default {computed: {cells () {return [{field: name,label: 名称,type: textfield,attrs: { placeholder: 名称 },validate: { required: { message: 请输入名称} }},{field: enable,label: 启用标志,type: dropdown,extra: {options: [{ label: 启用, value: 1 }, { label: 禁用, value: 2 }] }}]}}}
/scriptform中使用component的实现
formc-form-cell v-forcell of cellList :keycell.field :fieldcell.fieldcomponent:is${TYPE_PRE}${cell.type}:fieldcell.field:attrscell.attrs:extracell.extra:validatecell.validate:cellscell.cells/component/c-form-cell
/form表单和表格在基于VUE的后台引擎开源项目中都有实现欢迎star和fork。
结语
Vue上手简单文档清晰完备人生苦短我用vue。React粉丝Bie Peng Wo
更多专业前端知识请上
【猿2048】www.mk2048.com
