组件基础 :
组件是可复用的Vue实例, 且带有一个名字.
因为组件是可以复用的Vue实例, 所以它们与new Vue接收相同的选项, 例如: data, computed, watch, methods以及生命周期钩子等. 仅有的例外是像 el 这样根实例特有的选项.
注意事项:
data 必须是一个函数
父子组件中通过Props向子组件进行传递数据
字符组件中通过$emit事件向父组件进行传递数据.
参数: $emit()中接受的第一个参数是父组件中一个被监听的属性名, 第二个参数是给父组件传递的数据, 数据可以是数组或字典等形式.
基本组件:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> </head> <body> <div id="d1"> <global-component></global-component> </div> <script> // Vue.component("global-component", { // template: "<div><h3>{{w}}</h3><h2>{{w}}</h2></div>", // data(){ // return { // w: "hello w" // } // } // }); // new Vue({ // el: "#d1", // // }) let Header = { template: ` <div> <h1>{{g}}</h1> </div> `, data(){ return { g: "hello g" } }, }; let App = { template:` <div> <app-header></app-header> </div>`, components: { "app-header": Header } }; new Vue({ el: "#d1", template: `<App></App>`, components: { "App":App } }) </script> </body> </html>
父子组件:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>父子组件</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> </head> <body> <div id="d1"></div> <script> let son = { template: ` <div><h2>{{f}}</h2></div> `, props: ["f"] }; let father = { template: ` <div> <father v-bind:f="fa"></father> </div> `, components: { "father": son }, data() { return {fa: "我"} } }; new Vue({ el: "#d1", //Vue示例注册组件的入口 template: `<my-compo></my-compo>`, components: { "my-compo": father } }) </script> </body> </html>
子父组件:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子父组件</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> </head> <body> <div id="d1"></div> <script> let son = { template:`<div><button @click="son">点我变大</button></div>`, methods: { son: function () { this.$emit("change-size", 0.1) } } }; let Father = { template:` <div> <span :style="{fontSize: font + 'em'}">变大大~~~~~~</span> <my-son v-on:change-size="sizes"></my-son> </div>`, components: { "my-son": son }, data(){ return { font: 1 } }, methods:{ sizes: function (value) { this.font +=value } } }; new Vue({ el: "#d1", template: "<Father></Father>", components: { Father, } }) </script> </body> </html>
混入:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>混入</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> </head> <body> <div id="d1"> <!--命名不能使用驼峰命名--> <myhead></myhead> <my-body></my-body> </div> <script> let mixs = { methods: { show: function () { console.log(name +"来了") }, hide: function (name) { console.log(name+ "去了") } } }; let myHead = { template:` <div> <button @click="show">点我来啊</button> <button @click="hide">点我去啊</button> </div> `, mixins: [mixs] }; let myBody = { template: ` <div> <button @mouseenter="show('wang')">点我鼠标来啊</button> <button @mouseleave="hide('wang')">点我鼠标去啊</button> </div> `, mixins: [mixs] }; new Vue({ el: "#d1", // template components: { "myhead": myHead, "my-body": myBody, } }) </script> </body> </html>
插槽:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>插槽</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> </head> <body> <div id="d1"> <global-component>python</global-component> <global-component>linux</global-component> <global-component>go</global-component> <global-component>java</global-component> </div> <script> Vue.component("global-component", { template:` <div><slot></slot></div> ` }); new Vue({ el: "#d1" }) </script> </body> </html>
具名插槽:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>具名插槽</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="d1"> <global-component> <!--输出顺序和此处先后顺序相同--> <!--使用slot实行进行命名--> <div slot="python">python</div> <div slot="go">go</div> <div slot="linux">linux</div> <div slot="java">java</div> </global-component> </div> <script> Vue.component("global-component", { template:` <div> <slot name="python"></slot> <slot name="go"></slot> <slot name="java"></slot> <slot name="linux"></slot> </div> `, }); new Vue({ el: "#d1" }) </script> </body> </html>