Vue技术—组件的几个注意点

最新推荐文章于 2022-05-23 17:02:41 发布

小恶魔ly

最新推荐文章于 2022-05-23 17:02:41 发布

阅读量624

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u013140948/article/details/122256131

版权

vue.js 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue组件的命名规则，包括单个单词和多个单词组成的组件名，以及在不同情况下的写法。同时，讲解了组件标签的使用，强调了在不使用脚手架时的注意事项。此外，还展示了组件的简写形式和注册方式，帮助开发者更好地理解和应用Vue组件。

摘要由CSDN通过智能技术生成

几个注意点：

1、关于组件名：

一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School

多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

备注：
（1）组件名尽可能回避HTML种已有的元素名称
（2）可以使用name配置项指定组件在开发者工具中呈现的样子

2、关于组件标签：

第一种写法：< school ></ school >
第二种写法：< school >
备注：不使用脚手架时，< school />会导致后续组件不能渲染。

3、一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

<div id="root">
    <!--第三步使用组件-->
    <!--<school></school>-->
    <!--<my-school></my-school>-->
    <!--<MySchool></MySchool>  此状况下报错，安装脚手架后可用-->
    <!--<Myschool></Myschool>-->
    <Myschool/>
</div>
<script>
    /*第一步创建组件*/
    /*const school = Vue.extend({
        template : `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
                name:'某某某学校',
                address:'天津市'
            }
        }
    })*/

    const school = {
    	name:'hello'
        template : `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
                name:'某某某学校',
                address:'天津市'
            }
        }
    }

    new Vue({
        el:'#root',
        /*第二部注册局部组件*/
        components:{
            // school:school
            // 'my-school':school
            // MySchool:school 此状况下报错，安装脚手架后可用
            Myschool:school
        }
    })
</script>