组件的基本写法可以如下:

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>

VUE的组件DEMO的更多相关文章

  1. Vue异步组件Demo

    Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...

  2. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  3. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

  4. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  5. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  6. Vue评论组件案例

    最近学习了Vue前端框架,在这里记录一下组件的用法,我自己试着写了一个评论的组件,大神看到勿喷,欢迎提出宝贵意见. 首先看一下效果图 用到的文件有: <link rel="styles ...

  7. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  8. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  9. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

随机推荐

  1. Socket通信客户端和服务端代码

    这两天研究了下Socket通信,简单实现的客户端和服务端代码 先上winfrom图片,客户端和服务端一样 服务端代码: using System; using System.Collections.G ...

  2. springMvc使用restful风格

    转载:https://blog.csdn.net/weide_java/article/details/53793769 1,REST架构师一个抽象的概念,目前主要是基于HTTP协议实现,其目的是为了 ...

  3. IIS 配置asp.net 环境

    打开Internet信息服务管理器,在左侧点击“应用程序池”,下面将以asp.net v4.0 程序池为例 在中间的“ASP.NET V4.0”上右键“高级选项”,展开“进程模型”,找“标识”选项,然 ...

  4. 多个ajax请求时控制执行顺序或全部执行后的操作

    1.当确保执行顺序时 (1)请求加async: false,,这样所有的ajax就会同步执行,请求顺序就是代码顺序: (2)$.when   确保所有异步的ajax请求完毕时 $.when($.aja ...

  5. UGUI Slider

    1.新建一个Cube命名为Player,在上面挂一个脚本命名为Player,脚本内容如下: using System.Collections; using System.Collections.Gen ...

  6. VS Ctrl + Shift + Q

    在VS中按 Ctrl + Shift + Q 可以快速查找 void OnCollisionStay  等方法. void OnCollisionStay(Collision collision) { ...

  7. Kudu-Impala集成特性

    不多说,直接上干货! Kudu-Impala 集成特性 CREATE / ALTER / DROP TABLE Impala 支持使用 Kudu 作为持久层来 creating(创建),alterin ...

  8. Misc1

    什么是编译进内核与制作成模块 编译进内核意味着内核对这一类的功能不会在依赖其他的东西, 说白了就是所谓静态编译, 内核在启动的时候就会拥有这一部分的功能, 但是这样内核的体积就会变大 编译成模块, 其 ...

  9. Powershell(3)

    Powershell 可以使用powershell管理的服务 share point, exchange, lync, windows azure, window server, system cen ...

  10. 转载【Ubuntu】Ubuntu14.04虚拟机调整窗口大小自适应VMware14窗口

    Ubuntu屏幕居中一小块,很不好看 查看-–> 自动调整大小—>自动适应客户机/自动适应窗口 切一下就可以把Ubuntu图的界面大小调的和VMware窗口自适应了 效果:   转载 自h ...