第5章 Vue组件电子课件_第1页
第5章 Vue组件电子课件_第2页
第5章 Vue组件电子课件_第3页
第5章 Vue组件电子课件_第4页
第5章 Vue组件电子课件_第5页
已阅读5页，还剩14页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章Vue组件课程内容

组件的基本使用

Vue组件嵌套

父组件向子组件通信

子组件向父组件通信

任意组件及平行组件通信创建组件并发布2

什么是组件组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。34【例5-1】体验自定义组件<body><divid="app"><!--3.#app是Vue实例挂载的元素，应该在挂载元素范围内使用组件--><my-component></my-component></div></body><scriptsrc="js/Vue.js"></script><script>varmyComponent=Vue.extend({//1.创建一个组件构造器template:'<div>欢迎来到斤斗云在线教育云平台</div>'})//2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>Vponent('my-component',myComponent);newVue({el:'#app'});</script></html>组件使用Vue.js的组件使用有三个步骤，具体步骤如下：51.调用Vue.extend()方法创建组件构造器varMyComponent=Vue.extend({//选项})2.调用Vponent()方法注册组件。Vponent('my-component',MyComponent)3.在Vue实例的作用范围使用组件。<divid="app"><my-component></my-component></div>组件中的data必须是函数Vue组件中data选项为什么必须是函数？因为一个组件可以在多处复用，如果data是一个对象，那么所有复用的组件实例将都显示相同内容，如此就限制了组件复用的意义。构造Vue实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data必须是函数。<script>vardata={counter:0}Vponent('error-counter',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',

data:function(){returndata;}})Vponent('right-counter',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',//返回局部counterdata:function(){return{counter:0}}})

varapp=newVue({el:'#app'})</script>

7【例5-5】演示组件中的data必须是函数<!DOCTYPEhtml><html><metacharset="UTF-8"><title>组件系统</title><body><scriptsrc="../js/Vue.js"></script><divid="app"><my-component></my-component></div><script>Vponent('my-component',{template:'<div>{{msg}}</div>',data:{msg:'Vue.js'}})newVue({el:'#app'})</script></body></html>结果发现Vue会停止运行，并在控制台发出警告，如图,提示组件实例中data必须是一个函数Vue两大核心思想组件化数据驱动组件本身也可以包含组件8Vue组件嵌套varChild=Vue.extend({template:'<div>我是子组件!</div>'});varParent=Vue.extend({template:'<div>我是父组件<child-component></child-component></div>',components:{'child-component':Child}});Vponent("parent-component",Parent);需要注意的是从Vue2.0开始，每个组件必须只有一个根元素。不再允许片段实例。

使用props组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。通常可以使用props把数据传给子组件【例5-9】动态Prop向子组件动态传递数据<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>hello,world!</title></head><body><scriptsrc="../js/Vue.js"></script><h1>动态Prop向子组件动态传递数据</h1><divid="app-7">输入信息：<inputtype="text"v-model="msg"><childv-bind:message="msg"v-bind:name="person"ref="child1"></child></div><script>Vponent('child',{

props:['message','name'],template:'<span>{{message}}发送者：{{name}}</span>'})//初始化根实例

varapp7=newVue({el:'#app-7',data:{msg:'hello',person:'乐美无限'}})</script></body></html>使用props把数据传给子组件还有一种形式，也就是v-bind绑定HTML特性到一个表达式，可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件，使用v-model动态Prop向组件动态传递数据。【例5-10】演示props验证<body><divid="app"><childv-bind:message="message"></child></div><scripttype="text/javascript"src="../js/Vue.js"></script><scripttype="text/javascript">varchild={props:{message:Number},template:'<div>{{message}}</div>'};varvm=newVue({components:{'child':child},el:'#app',data:{message:123}});</script></body>使用Slot插槽内容分发单Slot插槽默认父组件在子组件内套的内容是不显示的。除非子组件模板包换至少一个<slot>插口，否则父组件的内容将会被丢弃。Slot插槽为父组件提供了安插内容到子组件中的方法单Slot插槽具名Slot插槽Slot作用域插槽。<divid="app"><children><!--span这行不会显示--><span>注册成功</span></children></div><script>varvm=newVue({el:'#app',components:{children:{template:"<button>这是子组件</button>"}}});</script>

<divid="app"><children><span>注册成功</span></children></div><script>varvm=newVue({el:'#app',components:{children:{template:"<div><slot><p>默认效果</p></slot><button>这是子组件</button></div>"}}});</script>

具名Slot插槽如果有多个标签，可以使用具名插槽<my-component><h1slot=”header”>页面标题</h1><p>主要内容的一个段落</p><p>另一个主要段落</p><divslot=”footer”><address>这里是一些联系信息</address></div></my-component><script>Vponent('my-component',{template:`<divclass="container"><header><slotname="header"></slot></header><main><slot></slot></main><footer><slotname="footer"></slot></footer></div>`})//初始化根实例

varapp7=newVue({el:'#app-7'})</script>Slot作用域插槽<divid="app-7"><my-component><templatescope="myProps"><span>这里是父组件传入的信息！</span><span>这里是父组件从子组件接收到的数据，{{myProps.text}}，格式化后再分发给插槽。</span></template></my-component></div><script>Vponent('my-component',{template:`<divclass="container"><slottext="hellofromchild"></slot></div>`})//初始化根实例

varapp7=newVue({el:'#app-7'})</script>这里是父组件从子组件接收到的数据，{{myProps.text}}，格式化后再分发给插槽通过{{myProps.text}}就可以调用组件模板中的<slottext="hellofromchild"></slot>绑定的数据，所以作用域插槽是一种子向父传参的方式

组件通信组件间的通信主要有4种Vue组件通信方式父子组件的通信非父子组件的eventBus通信利用本地缓存实现组件通信Vuex通信父组件向子组件通信传递数据Props（默认是单向绑定）$parent1、使用props属性父组件向子组件传值可以使用如下代码：

<child-componentv-bind:子组件属性="父组件数据属性"></child-component>2、通过$parent直接在子组件中通过this.$parent的到调用其父组件，但并不建议使用子组件向父组件通信使用自定义事件

在父组件中调用子组建的时候，绑定一个自定义事件和对应的处理函数。

在templete里应用子组件时,定义事件changeMsg<counter@changeMsgEvent="changeMsg"></counter>//

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论