组件
什么是组件
组件是可复用的 Vue 实例，且带有一个名字
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如：头部导航、尾部信息等模块。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
组件分类
组件的作用域分为两种：全局组件 和 局部组件。
全局组件：在所有的Vue实例中都可以使用
局部组件：只有在注册了组件的Vue实例中才可以使用
全局组件
使用 Vue.component 定义的组件为全局组件，在所有的 Vue 实例中都可以使用。
比如以下代码中定义了一个全局组件，这个组件在两个Vue实例中都可以使用：
语法
////
Vue.component("",{ template: ``, // 定义html部分，要求有一个根标签 data() { // 定义数据部分 return { } }, })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <my-nav></my-nav> </div> <div id="app2"> <!--组件必须绑定在实例下面才能起作用--> <my-nav></my-nav> </div> <script> //定义组件1 Vue.component("MyNav", { template: '<div>您好!{{name}}</div>', data: function () { return { name: "jack" } } }) //下面两个实例都可以使用全局组件 new Vue({ el: '#app1' }); //下面两个实例都可以使用全局组件 new Vue({ el: '#app2' }); </script> </body> </html>
局部组件
局部组件是指只能在注册了该组件的 Vue 实例中才可以使用。（先需要注册才能用）
局部组件的定义只是定义一个组件对象：
局部组件的定义只是定义一个组件对象：
var 组件名 = { ... }
在需要使用这个组件的Vue中注册组件
const app = new Vue({ ... components:{ 组件名：组件对象 } })
局部组件使用实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <my-hello></my-hello> </div> <script> var hello = { template: '<div>您好!现在是在使用子组件</div>', }; //下面两个实例都可以使用全局组件 new Vue({ el: '#app1', components:{ "MyHello":hello } }); </script> </body> </html>
组件自定义属性
什么是组件属性
什么是组件属性？比如我们在使用img标签时， src就是属性。如果我们把img看做一个组件的话，src就是这个组件的属性。
总结：组件属性用于父组件向子组件传递数据。
定义属性
当需要为组件设置属性时，我们需要先在定义组件时使用 props 来设置这个组件上所有属性的名字
///
Vue.component('...',{ ... props:[属性名字数组] })
定义了组件属性之后，在组件中就可以像使用一个普通数据一样使用属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <my-nav welcome="张三丰"></my-nav> </div> <script> Vue.component('MyNav', { props: ['welcome'], template: '<div>欢迎您，游客! {{welcome}}</div>' }) //下面两个实例都可以使用全局组件 new Vue({ el: '#app1' }); </script> </body> </html>
绑定属性值
还可以把属性值绑定到 Vue 的数据中,实现方式如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <my-nav :welcome="txt"></my-nav> </div> <script> Vue.component('MyNav', { props: ['welcome'], template: '<div>欢迎您，游客! {{welcome}}</div>' }) //下面两个实例都可以使用全局组件 new Vue({ el: '#app1', data:{ txt:"绑定数据到属性" } }); </script> </body> </html>
组件事件
- 原生事件
当需要在组件上绑定 JS 中原生的事件时，必须要添加 .native 修饰符，否则该事件是无法触发的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <my-nav :welcome="txt" @click.native="hello">您好</my-nav> </div> <script> Vue.component('MyNav', { props: ['welcome'], template: '<button>欢迎您，游客! {{welcome}}</button>' }) //下面两个实例都可以使用全局组件 new Vue({ el: '#app1', data:{ txt:"绑定数据到属性" }, methods:{ hello:function(){ alert("组件事件"); } } }); </script> </body> </html>
- 自定义事件
除了原生的事件外，还可以为组件添加自定义的事件，通过自定义的事件，子组件可以向父组件传递消息
在组件中我们可以使用 emit 触发一个事件，这个事件的名字是我们自己定义的：
定义方法如下：声明事件名称
this.$emit('事件名')
在使用这个组件时，就可以为这个新的事件名绑定一个事件：
<my-component v-on:事件名="doSomething"></my-component>
或者：
<my-component @事件名="doSomething"></my-component>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件</title> <script src="js/vuejs-2.5.16.js"></script> <script src="js/toDao.js"></script> </head> <body> <div id="app1"> <!--组件必须绑定在实例下面才能起作用--> <to-do @todo="todo"></to-do> </div> <script> //下面两个实例都可以使用全局组件 new Vue({ el: '#app1', methods: { todo: function () { console.log('todo组件中发表了新的todo') } } }); </script> </body> </html>
