探索学习 Vue 组件篇第三篇组件的几个注意点

本文链接：https://blog.csdn.net/pymxb1991/article/details/125924429

文章目录

探索学习 Vue 组件篇
- 第三篇组件的几个注意点

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第三篇组件的几个注意点

组件示例

定义学校组件，分析几个组件中的注意点

<div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <school></school>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示	
     //定义组件 
     const school = Vue.extend({
        //数据展示结构模板
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{schoolAddress}}</h2>
            </div>    
        `,
        //页面数据
        data(){
            return{
                schoolName: '天津安锐捷大学',
                schoolAddress: '普天科技园',
            }
        }
     })	
     new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
        },
        //注册组件
        components:{ // 配置的key 、 value  key：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称
            school:school,
        }
      })
  </script>

1. 关于组件名称：

1.1 components 的详解

组件名称，也就是components中的key 的命名
components中：配置的{key :value}
- key：指组件名称(注册时候的名称，为将来使用的组件名称)
- value：为定义组件时起的变量名称

1.2 一个单词组成

第一种写法(首字母小写)：school
第二种写法(首字母大写)：School

1.3 多个单词组成

第一种写法(kebab-case命名) my-school,注意：只能写首字母小写
第二种写法(CamelCase命名) MySchool (需要Vue 脚手架支持)
备注：
- 组件名尽可能回避HTML 中已有的元素名称，例如：h2、H2 这样写都不可以
- 可以使用name 配置项来指定组件在开发者工瞧吧呈现的名字。