Vue组件
1.组件的基本使用
组件可以理解为一个模块，当这个模块需要重复使用时，定义为组件，在其他页面中也可以注册组件并引用
比如下面案例中点击计数的按钮，定义为组件后多次使用更为方便
案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>vue</title><script src="../JS/vue.js"></script></head><body><div id="root"><counter></counter><counter></counter></div><script>// 定义组件const counterTemp = {template: `<button @click="num++">你点击了{{num}}次}</button>`,// 定义组件使用到的数据属性data() {return {num: 0,};},};// 全局注册组件：在所有的vue实例中都可以使用组件// 参数1：组件名称// 参数2：具体的组件// Vue.component("counter",counterTemp)var vm = new Vue({el: "#root",// 局部注册组件：只能在当前Vue实例中使用components: {// 组件名称：具体组件counter: counterTemp,},});</script></body>
</html>组件的定义必须放在Vue创建对象之前
子与父组件之间无法直接使用对方数据，所以为了达成父组件向子组件通信，要让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递
2.父组件向子组件通信
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>vue</title><script src="../JS/vue.js"></script></head><body><div id="root"><!-- 把父组件中的count传递给子组件中的number属性 --><aaa :number="count" :ids="arr" :person="p"></aaa></div><script>var aaa = {// 定义组件的模板template: `<h2>{{num}}---{{number}}---{{ids}}---{{person}}</h2>`,// 定义组件中使用到的数据属性data() {return {num: 0,};},// 给组件添加属性props: {number: "",// 数组属性ids: [],// 对象属性person: {}},};// 注册：全局注册// "组件名称",具体组件Vue.component("aaa", aaa);var vm = new Vue({el: "root",// 定义父组件的数据data: {count: 5,arr: [1, 2, 3],p: { username: "mkbk", age: 23 },},});</script></body>
</html>3.子组件向父组件通信
子组件调用父组件的方法，进而影响到父组件中的数据
<div id="app"><h1>父组件中:app_num={{app_num}}</h1><!-- 把父组件的add方法,绑定给子组件的aaa属性,绑定方法使用@属性名="方法名" --><!-- 把父组件的rem方法,绑定给子组件的bbb属性,绑定方法使用@属性名="方法名 --><!-- 把父组件的app_num变量,绑定给子组件的counter_num属性,绑定变量使用:属性名="方法名 --><counter @aaa="add" @bbb="rem" :counter_num="app_num"></counter>
</div><script>//定义一个组件(模版)let counter = {template: `<div><h1>子组件中:counter_num={{counter_num}}</h1><input type="button" @click="fun1" value="+"/><input type="button" @click="fun2" value="-"/></div>`,props:{//定义属性counter_num,用来接收父组件传递的数据counter_num:null,//定义aaa属性,用来绑定父组件的方法,当然,该定义也可以省略aaa:function(){},//定义bbb属性,用来绑定父组件的方法,当然,该定义也可以省略bbb:function(){},}, methods:{fun1(){//找到aaa属性所绑定的那个方法,执行那个方法return this.$emit("aaa");},fun2(){//找到bbb属性所绑定的那个方法,执行那个方法return this.$emit("bbb");}}}var app = new Vue({el: '#app',data: {app_num: 0},components: {counter},methods:{add(){this.app_num++;},rem(){this.app_num--;}}});
</script>4.组件的嵌套
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>组件的嵌套</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//定义student组件const student = Vue.extend({name:'student',template:`<div><h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div>`,data(){return {name:'123',age:18}}})//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <student></student></div>`,data(){return {name:'123',address:'123'}},//注册组件（局部）components:{student}})//定义hello组件const hello = Vue.extend({template:`<h1>{{msg}}</h1>`,data(){return {msg:'welcome'}}})//定义app组件const app = Vue.extend({template:`<div> <hello></hello><school></school></div>`,components:{school,hello}})//创建vmnew Vue({template:'<app></app>',el:'#root',//注册组件（局部）components:{app}})</script>
</html>
5.单文件组件
意义：需避免单个界面的功能过于复杂的情况
作用：复用编码，简化项目编程，提高运行效率
- School.vue:
<template><div id='Demo'><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button></div>
</template><script>export default {name:'School',data() {return {name:'123',address:'123'}},methods: {showName(){alert(this.name)}},}
</script><style>#Demo{background: orange;}
</style>- Student.vue:
<template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>
</template><script>export default {name:'Student',data() {return {name:'JOJO',age:20}},}
</script>- App.vue:
<template><div><School></School><Student></Student></div>
</template><script>import School from './School.vue'import Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script>
