vue-子组件创建/注册/使用流程
时间:2021-12-26 作者:zuobolan
流程分为三步
非单文件组件:(实际不用,因为很麻烦,框架都是多文件组件)
局部注册
1.创建一个组件
const school = 域名nd({ // 传入配置对象 // 子组件配置对象不要写el,根据vm引入作用到对应区域 // data属性需要写成函数
template:``,
name:\'school\', data(){ return { // 返回需要的data对象,因为data函数返回值是一个新的拷贝,而data对象是共同引用 } } })
2.注册该组件
// 在vm实例的配置对象中加入components属性 new Vue({ components:{ School:school, Student:student
// 最好是直接简写
school, } })
3.在需要的模板中使用组件标签
注册后就可以复用这些组件
// 标签名就是组件名 <School></School>
注意事项:
(1)全局注册的方法
//调用component方法 域名onent(\'hello\',hello) 参数为 组件标签名,组件名
(2)组件标签名的命名规范
方法1:
//单个单词,首字母大写 <School> //多个单词,多单词首字母大写 <MySchool>
方法2:
//全小写
<school>
//全小写 - 间隔
<my-school>
(3)组件名在vue开发者工具中的识别
在组件配置项中的name属性决定,name没写则选择注册中的组件标签名