非单文件组件
一个文件中包含有n个组件
Vue中使用组件的三大步骤
1. 定义组件(也就是创建组件)
2. 注册组件(这里有局部注册和全局注册)
3. 使用组件(编写组件标签)
注册组件(局部注册)
靠new Vue的时候传入components选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <!--<h2>学校名称:{{schoolName}}</h2>--> <!--<h2>学校名称:{{address}}</h2>--> <!--第三步:编写学校组件标签--> <xuexiao></xuexiao> <hr> <!--<h2>学生姓名:{{studentName}}</h2>--> <!--<h2>学生年龄:{{age}}</h2>--> <!--第三步:编写学生组件标签--> <xuesheng></xuesheng> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false // 第一步:创建school组件 const school = Vue.extend({ // 这里需要注意,组件定义时一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪一个容器 // el:"#root", template:'<div>' + '<h2>学校名称:{{schoolName}}</h2>' + '<h2>学校名称:{{address}}</h2>' + '</div>', // 在组件的使用中,data必须使用以下的函数式写法,否则会报错 data(){ return { schoolName:"东华理工大学", address:"江西南昌" } } }) // 第一步:创建student组件 const student = Vue.extend({ template:'<div>' + '<h2>学生姓名:{{studentName}}</h2>' + '<h2>学生年龄:{{age}}</h2>' + '</div>', data(){ return { studentName:"马铃薯", age:26 } } }) // 创建vm new Vue({ el:"#root", // data(){ // return{ // schoolName:"东华理工大学", // address:"江西南昌", // studentName:"马铃薯", // age:26 // } // } // 第二步:注册组件(局部注册) components:{ xuexiao:school, xuesheng:student } }) </script> </body> </html>
注册组件(全局注册)
靠Vue.component("组件名",组件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <!--第三步:编写hello组件标签--> <hello></hello> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false // 第一步:创建hello组件 const hello = Vue.extend({ // 这里需要注意,组件定义时一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪一个容器 // el:"#root", template:'<div>' + '<h2>你好啊,{{name}}</h2>' + '</div>', // 在组件的使用中,data必须使用以下的函数式写法,否则会报错 data(){ return { name:"好久不见!" } } }) // 第二步:注册组件(全局注册) Vue.component("hello",hello) // 创建vm new Vue({ el:"#root", }) </script> </body> </html>
组件名的注意事项
一个单词组成:
1)第一种写法(首字母小写):school
2)第二种写法(首字母大写):School
多个单词组成:
1)第一种写法(kebab-case命名):my-school
2)第二种写法(CamelCase命名):MySchool(这里需要Vue脚手架支持)
备注:
1)组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
2)可以使用name配置项指定组件在开发者工具中呈现的名字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>几个注意点</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>{{msg}}</h1> <!--第三步:使用组件标签--> <!--<School></School>--> <my-school></my-school> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false // 第一步:创建组件 const school = Vue.extend({ // 可以使用name配置项,指定组件在开发者工具中呈现的名字 // 也就是说,只要使用了name配置项,不管注册组件时使用的名字是什么,组件在开发者工具中的名字都为Malingshu name:"malingshu", template:"<div>" + "<h2>学校名称:{{schoolName}}</h2>" + "<h2>学校地址:{{address}}</h2>" + "</div>", data(){ return{ schoolName:"东华理工大学", address:"江西南昌" } } }) new Vue({ el:"#root", data(){ return{ msg:"欢迎来到马铃薯的学习空间!" } }, // 第二步:注册组件(局部注册) components:{ // School:school, "my-school":school // 组件在开发者工具中的名字为 MySchool } }) </script> </body> </html>
组件标签的注意事项
1)第一种写法:<school></school>
2)第二种写法:< school/> (这里需要Vue脚手架支持)
备注:
不实用脚手架时,<school/>会导致后续组件不能渲染
一个简写方式
const school = Vue.extend(options) 可简写为:const school = options
这是因为父组件components引入的时候会自动创建
// 创建组件 const school = Vue.extend({ // 可以使用name配置项,指定组件在开发者工具中呈现的名字 // 也就是说,只要使用了name配置项,不管注册组件时使用的名字是什么,组件在开发者工具中的名字都为Malingshu name:"malingshu", template:"<div>" + "<h2>学校名称:{{schoolName}}</h2>" + "<h2>学校地址:{{address}}</h2>" + "</div>", data(){ return{ schoolName:"东华理工大学", address:"江西南昌" } } }) // 简写 const school2 = { // 可以使用name配置项,指定组件在开发者工具中呈现的名字 // 也就是说,只要使用了name配置项,不管注册组件时使用的名字是什么,组件在开发者工具中的名字都为Malingshu name:"malingshu", template:"<div>" + "<h2>学校名称:{{schoolName}}</h2>" + "<h2>学校地址:{{address}}</h2>" + "</div>", data(){ return{ schoolName:"东华理工大学", address:"江西南昌" } } }
单文件组件
一个文件中只包含有1个组件
标签:文件,school,Vue,name,schoolName,address,组件 From: https://www.cnblogs.com/REN-Murphy/p/17764500.html