Vue -- 非单文件组件

最新推荐文章于 2023-07-26 15:50:55 发布

zmm_mohua

最新推荐文章于 2023-07-26 15:50:55 发布

阅读量228

点赞数

分类专栏： vue学习记录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42250642/article/details/123021458

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Vue – 非单文件组件

小结

Vue中使用组件的三大步骤：
   一、定义组件（创建组件）
   二、注册组件
   三、使用组件（写组件标签）
   一、如何定义一个组件？
    使用Vue.extend(options)创建，其中options和 new Vue(options)时传入的哪个options几乎一样，但也有点区别：
    1、el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
    2、data必须写成函数，为什么？ ---避免组件被复用时，数据存在引用关系
    备注：使用template可以配置组件结构
   二、如何注册组件？
     1、局部注册：靠new Vue的时候传入components选项
     2、全局注册：靠Vue.component('组件名',组件)
   三、编写组件标签：
     <student></student>
     
几个注意点：
   1、关于组件名：
     一个单词组成：
        第一种写法（首字母小写）：school
        第二种写法（首字母大写）：School
     多个单词组成：
        第一种写法（kebab-case命名）：my-school
        第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
     备注：
         1）组件名尽可能回避HTML中已有的元素名称，例如：h2，H2都不行
         2）可以使用name的配置项指定组件在开发者工具中呈现的名字
  2、关于组件标签：
         第一种写法：<school></school>
         第二种写法：<school/>
         备注：不使用脚手架时，<school/>会导致后续组件不能渲染
  3、一个简写方式：
         const school = Vue.extend(options)可简写为 const school = options
         
关于VueComponent：
  1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的.
  2、我们只需要写<school/> 或 <school><school/>，Vue解析时会帮我们创建school组件的实例对象，
     即Vue会帮我们执行的: new VueComponent(options)
  3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
  4、关于this指向：
     1）组件配置中：
       data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
     2）new Vue(options)配置中：
       data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
  5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
     Vue的实例对象，以后简称vm
     
1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2、为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法

代码

基本使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>{{msg}}</h1>
            <!-- 第三步：编写组件标签 -->
            <xuexiao></xuexiao>
            <hr>
            <student></student>
        </div>

        <div id='root2'>
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //第一步：创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName">点击，提示学校名</button>
                </div>
            `,
            //el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于谁
            data () {
                return {
                    schoolName:'湖南大学',
                    address:'湖南省长沙市'
                }
            },
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            }
        })

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

        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好！{{name}}</h2>
                </div>
            `,
            data () {
                return {
                    name:'Tom',
                }
            }
        })

        //注册组件(全局注册)
        Vue.component('hello',hello)

        //创建vm
        new Vue({
            el:'#root',
            data:{
                msg:'你好，同学',
            },
            //第二步：注册组件（局部注册）
            components:{
                xuexiao:school,
                student  //它就是student:student，前是组件名，后是创建时的名字
            }
        })

        new Vue({
            el:'#root2'
        })
    </script>
</html>

运行结果

基本使用：
在这里插入图片描述

zmm_mohua

关注

0
点赞
踩
0

收藏

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

Vue – 非单文件组件小结Vue中使用组件的三大步骤：一、定义组件（创建组件）二、注册组件三、使用组件（写组件标签）一、如何定义一个组件？使用Vue.extend(options)创建，其中options和 new Vue(options)时传入的哪个options几乎一样，但也有点区别： 1、el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 2、data必须写成函数，为什么？ ---避免组件被复用
复制链接

扫一扫