Vue组件的操作-自定义组件，动态组件，递归组件

作者 | Jeskson

来源 | 达达前端小酒馆

v-model双向绑定

创建双向数据绑定，v-model指令用来在input，select，checkbox，radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。

v-mdel指令实现数据的双向绑定：

 用户名：


输入用户名是：{{name}}




 用户名：
 


用户名：{{name}}

组件中的表单控件：

自定义组件，父组件的input事件需要通过$emit参数：

handleinput: function(){
 // 向父组件触发input事件
 this.$emit('input, value');
}

自定义组件双向绑定

v-model指令进行双向数据绑定：

v-model工作原理

name={{name}}


父组件

动态组件，动态地切换组件的显示内容，多个组件可以使用同一个挂载点。

c1


c2


// 使用动态组件

递归组件，需要有一个结束的判断，否则就会一直循环。

创建组件：

const MenuComponent = {
 name: 'MenuComponent',
 template: '#menu-component',
 props: ['menus']
}

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

前端技术栈