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

 阅读约 7 分钟

file

作者 | 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 type="text" value="value"
@input = "handleinput($event.target.value)">

自定义组件,父组件的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>

<script>
//创建组件
const MyComponent = {
template: '#my-component",
props: ['value'],
methods: {
 handleInput: function(val){
  this.$emit('input',val);
 }
}
};
// 创建vue实例对象
const app = new Vue({
 el: '#app',
 data: {
  name: ''
 },
 components: {
  MyComponent
 }
});
</script>

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

<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>
<template id="c1">
<div>
this is c1
<div>
 name:<input type="text">
</div>
</div>
</template>
<template id="c2">
<div>
this is c2
</div>
</template>

<script>
// 定义组件
const C1Component = {
 template: '#c1'
};

const C2Component = {
 template: '#c2'
};

// vue实例对象
const app = new Vue({
 el: '#app',
 data: {
  currentComponent: 'C1Component'
 },
 components: {
  C1Component,
  C2Component,
 }
});
</script>

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

<template id="menu-component">
<ul>
<li v-for="item in menus">
{{item.name}}
<menu-component v-if="item.children" :menus="item.children">
</menu-component>
</li>
</ul>
</template>

创建组件:

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

<div id="app">
<menu-component :menus="menus">
<menu-component>
</div>
<template id="menu-component">
<ul>
<li v-for="item in menus">
{{item.name}}
<menu-component v-if="item.children" :menus="item.children">
</menu-component>
</li>
</ul>
</template>

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

作者Info:

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

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


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


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

欢迎关注达达的CSDN!

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

前端技术栈

阅读 353发布于 2019-12-12

推荐阅读
目录