组件化开发
入门案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!--引入vue的支持文件--> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <script type="text/javascript"> Vue.component('button-counter',{ /*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/ data:function () { return {count:0} }, /*组件template中必须只有一个根元素*/ template:'<button @click="add">点击了{{count}}次</button>', methods:{ add:function () { this.count+=1; } } }) const vm = new Vue({ el:'#app', data:{ } }); </script> </body> </html>
组件的命名使用规范：
如果使用驼峰式命名组件，那么在使用该组件时，必须要转化成短横杠式的方式使用，否则报错，例如命名了一个‘HelloWorld’组件 使用的时候必须是‘hello-world’
局部组件和全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!--引入vue的支持文件--> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <button-counter> </button-counter> <hello-world></hello-world> <hello-tom></hello-tom> </div> <script type="text/javascript"> /*下面这个是全局组件*/ Vue.component('button-counter',{ /*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/ data:function () { return {count:0} }, template:'<button @click="add">点击了{{count}}次</button>', methods:{ add:function () { this.count+=1; } } }) /*下面这个是局部组件， * 局部组件只能在注册他的父组件中使用，其他地方不能使用 * 如果局部组件被app组件注册的话，全局组件就不能使用下面的局部组件 */ var HelloWorld={ data:function () { return {msg:'hello-world'} }, template: '<div>{{msg}}</div>' } var HelloTom={ data:function () { return {msg:'hello-tom'} }, template: '<div>{{msg}}</div>' } const vm = new Vue({ el:'#app', data:{ }, components:{ 'hello-world':HelloWorld, 'hello-tom':HelloTom } }); </script> </body> </html>
组件之间的数据交互
父组件向子组件传值
重点：父组件通过props属性向子组件传值，props是单向数据流，只允许父组件向子组件传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!--引入vue的支持文件--> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <s-component :smsg="pmsg"></s-component> </div> <script type="text/javascript"> /*下面是子组件*/ Vue.component('sComponent',{ props: ['smsg'], data:function () { return { msg:'子组件的信息' } }, template:'<div>{{msg+"-----------"+smsg}}</div>' }); /*Vue实例对象相当于父组件*/ const vm = new Vue({ el:'#app', data:{ pmsg:'父组件的信息' } }); </script> </body> </html>
子组件向父组件传值
重点：子组件通过自定义事件向父组件传递值
Slot插槽
作用：即通过在子组件中定义slot标签，然后可以在其父组件调用时将值插入到标签中。
来源：https://www.cnblogs.com/zhang188660586/p/12253286.html