VUE的组件DEMO
组件的基本写法可以如下:
HTML:
<div id="components-demo"><button-counter self-data="this is my template"></button-counter></div>
JS:
// 定义一个名为 button-counter 的新组件var ComponentA = {//父组件传递过来的数据props:['selfData'],template: '<button>{{selfData}}</button>'};new Vue({el: '#components-demo',components: {'button-counter': ComponentA}});
更灵活的写法如下:
HTML:
<!--props:父dom把数据传递给子DOM组件的属性--><!--$emit:子组件通过这个关键字方法可以调用父DOM的方法--><!--slot-scope:子组件属性传递到父DOM,使用此关键字进行接收后可以展示其中的属性值--><!--原则:组件和父DMO是单向的,即,父属性的修改会影响到子属性,但是子属性的修改不可以影响父属性和双向绑定的定义还有一点差异--><div id="testList"><ul scope="tt"><!--user这样的自定义数据属性除了使用v-bind以外,还可以简写为:user="item"--><test-list-template v-on:getname="ShowName" v-for="item in users" v-bind:user="item" ><!--作用域插槽必须添加template,v2.5版本推荐使用slot-scope,之前的版本使用scope--><!--这里的userinfo就是slot这个插件所传递过来的对象,这个对象可以调用插槽中自定义的属性的值,例如userinfo.username和userinfo.userid--><template slot="test-list-name" slot-scope="userinfo"><label>ID:{{userinfo.userid}},姓名:{{userinfo.username}},年龄:</label></template></test-list-template></ul></div>
JS:
<script type="text/template" id="test1"><!--这样的写法是模板复用的写法,不需要带template这样的标签套在外面,否则会报错--><li v-on:click="SendMsg(user)" ><slot name="test-list-name" :userid="user.id" :username="user.name"></slot>{{user.age}}</li> </script><script>Vue.component('test-list-template', {//user,父组件传递来的数据props: ['user'],//子组件模板,这个模板又通过子组件定义的方法调用了父组件的方法template: '#test1',methods: {SendMsg: function (user) {//第一个是父组件的方法名,第二个是传递的参数,父组件对应的是v-on:getname,这个getname是父组件的方法名this.$emit('getname', user);}}});new Vue({el: '#testList',data: {users: [{ id: 1, name: '张三', age: 20 },{ id: 2, name: '李四', age: 22 },{ id: 3, name: '王五', age: 27 },{ id: 4, name: '张龙', age: 27 },{ id: 5, name: '赵虎', age: 27 }]},methods: {ShowName: function (data) {//data,来自于父组件alert('this is a ' + data.name);}}}); </script>
转载于:https://www.cnblogs.com/llcdbk/p/9548352.html
VUE的组件DEMO相关推荐
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
2019独角兽企业重金招聘Python工程师标准>>> element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组 ...
- 利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
- vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
- 17款优秀的Vue UI组件库汇总
17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
- vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件 目录结构 index.html components/component1 components/ ...
- 从零实现Vue的组件库(零)- 基本结构以及构建工具
今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项.尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件.将其沉淀下来,积累一些自己 ...
最新文章
- ORB_SLAM2帧Frame
- SAP HR模块配置假期日历和缺勤类型
- WP7 开发(十) 处理Html标记
- iOS 设置button文字过长而显示省略号的解决办法
- python脚本下载sentinel数据_Python API sentinelsat下载错误
- 学习构建WDF驱动程序 - 初步了解SOURCE和makefile文件
- js-innerHTML
- springboot 静态注入 单例
- 关于java多态中覆盖的理解
- try catch finally 关闭流标准的写法
- visual studio code Python终端运行_VS Code 6 月 Python 扩展更新
- CAS (1) —— Mac下配置CAS到Tomcat(服务端)(转)
- chgrp和chown命令
- Linux双网卡绑定实现
- 大数据是如何助德国队打进欧洲杯半决赛的?
- 斗地主AI算法——第六章の牌型判断
- 何修改基于ArcGIS Server .NET ADF确良9.3的WEB SERVER端口使ArcGIS Server Manager来创建WEB应用的注意事项...
- 使用 laravel Passport 做 API 认证
- 几个文本处理工具的简单使用(wc,cut,sort,uniq,diff和patch)
- SegeX SgxVariantArrayT:VC封装支持多维数组的变体类型(VRIANT 、SafeArray)(附免费免积分源代码)