第6章 组件
来源：互联网 发布：java设置日期格式 编辑：程序博客网 时间：2024/05/18 20:36
6.1 组件注册
创建组件构造器
var MyComponent = Vue.extend({...});6.1.1 全局注册
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <my-component></my-component> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var MyComponent = Vue.extend({ template : '<p>This is my component</p>' }); Vue.component('my-component',MyComponent); new Vue({ el : '#app' })</script></body></html>6.1.2 局部注册
局部注册限定了组件只能在被注册的组件中使用，而无法在其他组件中使用。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <parent></parent> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var Child = Vue.extend({ template : '<p>This is a child component</p>' }); var Parent = Vue.extend({ template : '<div>' + '<p>This is a parent component</p>' + '<my-child></my-child>' + '</div>', components : { 'my-child' : Child } }); Vue.component('parent',Parent); var vm = new Vue({ el : '#app' })</script></body></html>6.1.3 注册语法糖
可以直接在注册的时候定义组件构建器选项。
Vue.component('my-component',{ template : '<p>This is a component</p>'})6.2 组件选项
6.2.1 组件选项中与Vue选项的区别
var MyComponent = Vue.extend({ data : function(){ return { name : 'component' } }})MyComponent会拥有多个实例，如果将对象data直接传递给Vue.extend({}),那所有MyComponent的实例会共享一个data对象，所有需要通过函数来返回一个新对象。
6.2.2 组件Props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <my-child parent="This data"></my-child> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> Vue.component('my-child',{ props : ['parent'], template : '<p>{{ parent }} is from parent </p>' }) var vm = new Vue({ el : '#app' })</script></body></html>1 驼峰命名
2 动态Props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <input type="text" v-model="message"/> <my-component :message="message"></my-component> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> Vue.component('my-component',{ props : ['message'], template : "<p>{{ 'From parent : ' + message }}</p>" }) var vm = new Vue({ el : '#app', data : { message : 'default' } })</script></body></html>3 绑定类型
.sync和.once显示的声明绑定为双向或单次绑定。
4 Props验证
6.3 组件间通信
6.3.1 直接访问
6.3.2 自定义事件监听
如何在实例中监听自定义事件
1 events选项
废弃
2 $on方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <button v-on:click="onClick">try</button> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var vm = new Vue({ el : '#app', data : { todo : [] }, methods : { onClick : function () { console.log('here'); this.$emit('test','there is a message'); } } }); vm.$on('test',function (msg) { console.log(msg); vm.todo.push(msg); })</script></body></html>6.3.3 自定义事件触发机制
1 $emit
2 $dispatch
废弃
3 $broadcast
废弃
4 子组件索引
v-ref 废弃，改为ref
6.4 内容分发
提供了一种混合父组件内容与子组件自己模板的方式，这种方式称之为内容分发。
6.4.1 基础用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <template id="my-template"> <div> <div class="title"> <slot name="title"></slot> </div> <div class="content"> <slot name="content"></slot> </div> </div> </template> <div id="app"> <my-slot> <p slot="title"> {{ title }}</p> <div slot="content"> {{content}}</div> </my-slot> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> Vue.component('my-slot',{ template : '#my-template' }); var vm = new Vue({ el : '#app', data : { title : 'This is a title', content : 'This is the content' } })</script></body></html>
6.4.2 编译作用域
父组件模板的内容在父组件作用域内编译，子组件模板的内容在子组件作用域内编译。
6.4.3 默认slot
slot标签匿名slot,作为找不到匹配的内容片段的回退插槽。
6.4.4 slot属性相同
可以定义多个相同slot标签属性的DOM标签，这样会依次插入到对应的子组件的slot标签中，以兄弟节点的方式呈现。
6.5 动态组件
Vue支持动态组件，即多个组件可以使用同一挂载点，根据条件来切换不同的组件。使用保留标签,通过绑定到is属性的值来判断挂载哪个组件。这种场景往往运用在路由控制或者tab切换中。
6.5.1 基础用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <ul> <li v-on:click="currentView = 'home'">Home</li> <li @click="currentView = 'list'">List</li> <li @click="currentView = 'detail'">Detail</li> </ul> <component :is="currentView"></component> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var vm = new Vue({ el : '#app', data : { currentView : 'home' }, components : { home : { template : '<div>Home</div>' }, list : { template : '<div>List</div>' }, detail : { template : '<div>Detail</div>' } } });</script></body></html>6.5.2 keep-alive
keep-alive可以将切换出去的组件保留在内存中，避免重新渲染。
<keep-alive> <component v-bind:is="view"></component></keep-alive>6.5.3 activate钩子函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <ul> <li v-on:click="currentView = 'home'">Home</li> <li @click="currentView = 'list'">List</li> <li @click="currentView = 'detail'">Detail</li> </ul> <keep-alive> <component :is="currentView"></component> </keep-alive> </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var vm = new Vue({ el : '#app', data : { currentView : 'home' }, components : { home : { template : '<div>' + '<p>Home</p>' + '<ul>' + '<li v-for="item in items"> {{ item }} </li>' + '</ul>' + '</div>', data : function () { return { items : [] } }, activated : function (done) { var that = this; setTimeout(function () { that.items = [1,2,3,4,5]; done(); },1000); } }, list : { template : '<div>List</div>' }, detail : { template : '<div>Detail</div>' } } });</script></body></html>6.6 Vue.js的变化
6.6.1 event
废除。
直接使用一个空vue实例来处理简单的事件触发机制：
var bus = new Vue();bus.$emit('create',{title : 'name'});bus.$on('create',function(data){ //进行对应的操作})<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <comp-a></comp-a> <comp-b></comp-b> </div> <template id="compa"> <div> <input type="text" v-model="name"/> <button @click="create">添加</button> </div> </template> <template id="compb"> <ul> <li v-for="item in items"> {{ item.name }}</li> </ul> </template><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script> var bus = new Vue(); var vm = new Vue({ el : '#app', components : { compA : { template : '#compa', data : function () { return { name : '' } }, methods : { create : function () { bus.$emit('create',{name : this.name}); this.name = ''; } } }, compB : { template : '#compb', data : function () { return { items : [] } }, mounted:function(){ var that = this; bus.$on('create',function (data) { that.items.push(data); }) } } } });</script></body></html>阅读全文
0 0
- 第6章 组件
- .NET组件程序设计 第6章 事件
- 第1章 组件
- 第11章 组件
- 第22章 文本组件
- 第2章 组件介绍
- Ext JS 6学习文档-第6章-高级组件
- 第 7 章 - 6 查找富文本字段的组件
- Ext JS 6学习文档-第3章-基础组件
- Ext JS 6学习文档-第3章-基础组件
- vue学习第6天，还是组件
- 第8章 数据组件和DataSet
- 第3章 Swing组件的体系结构
- 第23章 定制文本组件
- .NET组件程序设计 第2章
- .NET组件程序设计 第3章
- 第3章 内置组件的应用
- 第7 章图标菜单按钮组件
- HDU 2036 G
- 安装Linux软件使用的命令：最好使用yum命令--而不是rpm.
- Nginx 使用总结
- HDU 3339 In Action 最短路+01背包
- 面试总结之抽象类与接口的对比
- 第6章 组件
- Java学习笔记-代理模式
- unity3d c# lua数据分布思路
- 如何在网页中通过@font-face中嵌入中文字体（Web font）
- JVM--Java内存区域与内存溢出异常
- android页面跳转之——activity
- Compiling FreeType for iPhone
- gulp——初学
- JVM知识点小结
