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

亦凉 2021-08-20 01:38 569阅读 0赞

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0pBoDXa-1576150448082)(图片上传失败)\]][img-F0pBoDXa-1576150448082]

作者 | Jeskson

来源 | 达达前端小酒馆

v-model双向绑定

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

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

<div>
     用户名：<input type="text" v-model="name">
    </div>
    
    输入用户名是：{
       {name}}
    
    <div id="app">
    
    <div>
     用户名：
     <input type="text" v-bind:value="name"
     @input="name = $event.target.value">
    </div>
    
    用户名：{
       {name}}

组件中的表单控件：

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

<input type="text" value="value"
    @input = "handleinput($event.target.value)">
    
    handleinput: function(){
     // 向父组件触发input事件
     this.$emit('input, value');
    }

<div>
    自定义组件双向绑定
    <my-component v-model="dashucoding">
    </my-component>

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

<div id="app">
    <div>
    <h1>v-model工作原理</h1>
    <input type="text" v-bind:value="name" v-on:input="name = $event.target.value">
    <div>name={
       {name}}</div>
    </div>
    <div>
    父组件
    <my-component v-model="name"></my-component>
    </div>
    </div>
    
    <template id="my-component">
    <div>
    组件中
    <div>
    <input type="text" v-bind:value="value"
    v-on:input="handleInput($event.target.value)">
    </div>
    </div>
    </template>

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

<div id="app">
    <div>
    <button @click="currentComponent = 'C1Component'">
    c1
    </button>
    <button @click="currentComponent = 'C2Component'">
    c2
    </button>
    
    // 使用动态组件
    <keey-alive>
    <component v-bind:is="currentComponent">
    </component>
    </keey-alive>
    
    </div>
    </div>

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

创建组件：

const MenuComponent = {
     name: 'MenuComponent',
     template: '#menu-component',
     props: ['menus']
    }
    
    <div id="app">
    <menu-component :menus="menus">
    <menu-component>
    </div>

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

作者Info：

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

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

--------------------

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

--------------------

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

### 欢迎关注[达达][Link 1]的CSDN！ ###

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

![前端技术栈][format_png]

[img-F0pBoDXa-1576150448082]: /images/20210724/118f434c83f04dc7a78fc393a5baaafa.png
[Link 1]: https://blog.csdn.net/qq_36232611
[format_png]: /images/20210724/48215c354a7b416393c9ccd4be38acf3.png