飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

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没写则选择注册中的组件标签名

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。