Vue组件的操作-自定义组件,动态组件,递归组件
作者 | 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!
这是一个有质量,有态度的博客
Vue组件的操作-自定义组件,动态组件,递归组件的更多相关文章
- svelte组件:svelte3自定义桌面PC端对话框组件svelte-layer
基于Svelte3.x开发pc网页版自定义弹窗组件svelteLayer. svelte-layer:基于svelte.js轻量级多功能pc桌面端对话框组件.支持多种弹窗类型.30+参数随意组合配置, ...
- elementUI的动态tabs页的使用,vue的动态组件的操作
elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- 谈谈Vue的递归组件
2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去.所以,今天就来谈谈Vue的递归组件.我们先来看一个例子: See the Pen 递归组件 by imgss (@imgss) o ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- 使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
- vue初级学习--组件的使用(自定义组件)
一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...
随机推荐
- Debug 路漫漫-12:Python: ValueError: 'userid' is both an index level and a column label, which is ambiguous.
啊,又遇到难题了 == 想要对两个 dataframe 做自然连接 merge,连接的key 为 “userid”,但是报错:ValueError: 'userid' is both an index ...
- 转:对softmax讲解比较清楚的博客
https://blog.csdn.net/wgj99991111/article/details/83586508
- 如何取消 SqlDataAdapter.Fill() 的执行(转载)
问 Scenario: We have a DataGridView which is attached to DataAdapter (datatable), we load the data in ...
- yii2 HeadersAlreadySentException 报错
An Error occurred while handling another error:exception 'yii\web\HeadersAlreadySentException' with ...
- QT 使用QSetting读取配置文件中的中文乱码解决方案
windows下方案: 首先需要将ini文件改成UTF-8或GB2312编码格式,可以通过notepad++工具实现.然后在配置项中填入中文,如下: 接着在程序中使用 QSettings settin ...
- js删除html标记 去掉所有html标记
js删除html标记 去掉所有html标记 function delHtml(str){ return str.replace(/<[^>]+>/g,""); / ...
- VMware基本用法
###VMware tools 介绍 只有在VMware虚拟机中安装好了VMware Tools,才能实现主机与虚拟机之间的文件共享,同时可支持自由拖拽的功能,鼠标也可在虚拟机与主机之前自由移动(不用 ...
- Java11新特性解读
在去年的9月26日,Oracle官方宣布Java11正式发布,这是Java大版本周期变化后的第一个长期支持版本,非常值得关注.Java9和Java10都在很短的时间内就过渡了,所以,Java11将是一 ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- python从入门到放弃之进程进阶篇
什么我们得了解清楚什么是进程,进程就是系统分配的一个资源单位,真正在程序中干活得是线程,默认是每个进程中都拥有一个线程 然后我们在了解下什么是进程池这个概念 进程池是的数量是取决于我当前电脑的逻辑处理 ...