Vue 19-非单文件组件

llllllwllll

已于 2022-09-07 16:55:51 修改

阅读量184

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-07 16:54:47 首次发布

本文链接：https://blog.csdn.net/weixin_59070023/article/details/126749298

版权

<body>
    <div id="root">
        <!-- 编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>
</body>
<script>
    //创建school组件
    const school = Vue.extend({
        template: `
            <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址: {{address}}</h2>
                  <button @click="showName">点我提示学校名字</button> 
            </div>          
                    `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: '福建福州'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })
    //创建student组件
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名: {{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: 'llw',
                age: 18
            }
        },

    })
    //全局注册组件
    Vue.component('student', student)
    new Vue({
        el: '#root',
        data: {

        },
        //注册组件(局部注册)
        components: {
            school: school,
            // student: student
        }
    })
</script>

使用自定义组件的步骤：

1.创建组件

const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名: {{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: 'llw',
                age: 18
            }
        },

    })

注意：当data在组件中时，不能用对象的形式，而是要有返回值。

2.注册组件

2.1 局部注册组件

 new Vue({
        el: '#root',
        data: {

        },
        //注册组件(局部注册)
        components: {
            school: school,
            // student: student
        }
    })

2.2 全局注册组件

 Vue.component('student', student)

即Vue.compoent('组件名'，组件所在的位置)

3.应用组件

div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>

编写组件标签

4.总结

关于组件名：

一个单词组成：

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

第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）
备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签：

第一种写法：<school></school>
第二种写法：<school/>
备注：不使用脚手架时，<school/>会导致后续组件不能渲染
一个简写方式：const school = Vue.extend(options)可简写为：const school = options

llllllwllll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 19-非单文件组件

会导致后续组件不能渲染。第一种写法（kebab-case命名）：my-school。第一种写法：
复制链接

扫一扫

Vue 19-非单文件组件

“相关推荐”对你有帮助么？