-
全局组件
-
局部组件
-
示例：
// 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<button @click="count++">你点了我{{count}}次</button>', data() { return { count: 0 } } })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我是测试vue</title> <!-- 01-引入vue --> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <!-- 02创建一个div，ID为app --> <div id="app"> <!-- 02-使用组件 --><com></com> </div> <script>//01-创建全局组件 Vue.component('com', { template: '<button @click="add">你点击了我{{count}}次</button>', data() { return { count: 0 } }, methods: { add() { this.count++ } } }) const vm = new Vue({ el: '#app',//对应的操作区，必填 data: { msg: '' },//数据 methods: {}//方法 }); </script> </body> </html>
说明：
-
-
-
组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html
-
组件也是一个Vue的实例, 所以在组件中也有data/methods等
-
data必须是一个函数, 并返回一个对象
-
-
组件的js部分就是组件参数(对象)
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 04-使用组件 --> <son></son> <abc></abc> </div> <!-- 02-局部组件的样式在这里实现 --> <template id="jubu"> <div> <button @click="count++">你点击了{{count}}次</button> </div> </template> <script> //01-定义局部组件 const jubu = { template: '#jubu', data() { return { count: 0 } }, } const vm = new Vue({ el: '#app', data: {}, methods: { }, //03- 挂载局部组件 components: { // 定义组件---组件名：组件参数对象 son: jubu, abc: jubu } }); </script> </body> </html>
-