Vue组件的操作:自定义组件，动态组件，递归组件
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>作者 | Jeskson
来源 | 达达前端小酒馆
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
