Vue组件的操作

作者: 产品分类  发布:2020-01-03

全球彩票历史版本,v-model双向绑定

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

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

div 用户名:input type="text" v-model="name"/div输入用户名是:{{name}}div 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 divh1v-model工作原理/h1input type="text" v-bind:value="name" v-on:input="name = $event.target.value"divname={{name}}/div/divdiv父组件my-component v-model="name"/my-component/div/divtemplate div组件中divinput 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 divbutton @click="currentComponent = 'C1Component'"c1/buttonbutton @click="currentComponent = 'C2Component'"c2/button// 使用动态组件keey-alivecomponent v-bind:is="currentComponent"/component/keey-alive/div/div

template divthis is c1div name:input type="text"/div/div/template

template divthis 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 ulli 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 menu-component :menus="menus"menu-component/div

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

作者 | Jeskson来源 | 达达前端小酒馆

本文由全球彩票历史版本发布于产品分类,转载请注明出处:Vue组件的操作

关键词:

上一篇:Vim常用插件
下一篇:没有了