Vue组件的操作-自定义组件,动态组件,递归组件
2023-09-11 14:16:52 时间
作者 | 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-picker组件
- vue打包后空白页问题全记录 (background路径,css js404,jsonp等);
- Vue_(组件通讯)组件
- Vue_(组件)实例方法
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Ant Design Of Vue 组件库中获取 <a-range-picker>日期滑块选择器的参数
- vue项目中抽离.vue文件中的js代码
- vue Element-UI组件
- vue父组件调用子组件资源
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- vue3:子组件向父组件发送数据(vue@3.2.26)
- 浅谈 vue实例 和 vue组件
- vue 自定义指令input表单的数据验证
- Vue + webpack 项目实践
- Vue.js:轻量高效的前端组件化方案
- vue.js3.2.6:路由处理404报错(vue-router@4.0.11)
- vue elementUI表单输入完成后回车触发事件@keyup.enter.native
- vue 强制刷新子组件
- 怎样在vue中安装、配置vue-axios|axios
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- vue create 和vue init webpack的区别
- vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
- 毕业设计 40个SSM+VUE毕设项目分享【源码+论文】(三)
- Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Vue组件化开发
- Vue——自定义组件
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- 169:vue+openlayers 根据多边形坐标,获取面积值
- 034:vue+openlayers上传KMZ文件并在map上解析(代码示例)
- vue父组件传值和子组件触发父组件方法
- 在Vue中如何修改element UI组件的样式(deep 深度选择器)
- Vue 3.2+ setup语法糖、Composition API 总结
- 【三十天精通Vue 3】第二天 Vue 3带来的新特性
- Vue如何使得导航栏文字光标如何与内容同步
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)
- Vue学习笔记——Vue组件化编程