当前位置: 首页 > Web前端 > HTML

Vue组件的操作——自定义组件、动态组件、递归组件

时间:2023-04-02 19:33:41 HTML

作者|杰斯克森来源|达达前端酒馆v-model双向绑定创建双向数据绑定,v-model指令用于input、select、Checkbox、radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。v-mdel命令实现数据的双向绑定:

用户名:
输入的用户名是:{{name}}
用户名:
用户名:{{name}}组件中的表单控件:自定义组件,需要传递父组件的输入事件$emit参数:handleinput:function(){//触发输入事件给父组件this.$emit('input,value');
自定义组件双向绑定双向数据绑定的v-model指令:

v-model的工作原理

name={{name}}
父组件
组件
动态组件,动态地切换组件显示内容,多个组件可以使用同一个挂载点
c1c2//使用动态组件
thisisc1
name:
这是c2
对于递归组件,需要有结束判断,否则会一直循环下去。
    {{item.name}}
创建组件:constMenuComponent={name:'MenuComponent',template:'#menu-component',props:['menus']}
    {{item.name}}
??别忘了留下你的学习足迹【点赞+收藏+评论】AuthorInfo:【作者】:Jeskson【原创公众号】:达达前端酒馆。【福利】:公众号回复“信息”,送自学资料大礼包(进群分享,想要什么就说,看我有没有)!【转载说明】:转载请注明出处,谢谢合作!~大前端开发,定位前端开发技术栈博客,PHP背景知识点,web全栈技术领域,数据结构与算法,网络原理等以通俗易懂的方式呈现给小伙伴方式。感谢您的支持,感谢您的厚爱!!!如本账号内容有问题(例如:涉及版权或其他问题),请及时联系我们进行整改,我们会尽快处理。请喜欢它!因为您的认可/鼓励是我写作最大的动力!欢迎来到达达的CSDN!这是一个有品质有态度的博客