Vue—非单文件组件

最新推荐文章于 2023-06-11 19:52:45 发布

糖醋小排顾。

最新推荐文章于 2023-06-11 19:52:45 发布

阅读量96

点赞数 2

分类专栏： Vue学习文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128763073

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

定义：一个文件中包含有n个组件

基本使用：

<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>`,
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                schoolName:'****',
                address:'杭州',
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    //创建student组件
    const student =Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>`,
        //一定不要写el配置项，因为最终都要被一个vm管理
        data(){
            return{
                studentName:'Gui',
                age:20
            }
        }
    })
    //第一步：创建hello组件
    const hello=Vue.extend({
        template:`
            <div>
                <h3>hello,{{name}}</h3>
            </div>`,
        data(){
            return{
                name:'Tom'
            }
        }
    })
    //第二部：全局注册hello
    Vue.component('hello',hello)

    //创建vm
    new Vue({
        el:'#root',
        components:{
            //key:value
            //前面的为组件真实的名字
            //局部注册
            school,
            student
        }
    })
</script>

组件的几个注意点：

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

组件的嵌套：

<body>
        <!-- 准备好一个容器-->
        <div id="root">
            
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //定义student组件
        const student = Vue.extend({
            name:'student',
            template:`
                <div>
                    <h2>学生姓名：{{name}}</h2>  
                    <h2>学生年龄：{{age}}</h2>   
                </div>
            `,
            data(){
                return {
                    name:'Gui',
                    age:18
                }
            }
        })
        
        //定义school组件
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>  
                    <h2>学校地址：{{address}}</h2>   
                    <student></student>
                </div>
            `,
            data(){
                return {
                    name:'****',
                    address:'北京'
                }
            },
            //注册组件（局部）
            components:{
                student
            }
        })
        //定义hello组件
        const hello = Vue.extend({
            template:`<h1>{{msg}}</h1>`,
            data(){
                return {
                    msg:'欢迎来学习！'
                }
            }
        })
        
        //定义app组件
        const app = Vue.extend({
            template:`
                <div>   
                    <hello></hello>
                    <school></school>
                </div>
            `,
            components:{
                school,
                hello
            }
        })
        //创建vm
        new Vue({
            template:'<app></app>',
            el:'#root',
            //注册组件（局部）
            components:{app}
        })
    </script>

关于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原型上的属性、方法。

函数有prototype属性，实例对象有隐式原型属性__proto__

Object的原型对象为null

<body> 
        <!-- 准备好一个容器-->
        <div id="root">
            <school></school>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.prototype.x = 99
        //定义school组件
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>  
                    <h2>学校地址：{{address}}</h2>   
                    <button @click="showX">点我输出x</button>
                </div>
            `,
            data(){
                return {
                    name:'*****',
                    address:'北京'
                }
            },
            methods: {
                showX(){
                    console.log(this.x)
                }
            },
        })
        //创建一个vm
        const vm = new Vue({
            el:'#root',
            data:{
                msg:'你好'
            },
            components:{school}
        })
        
        //定义一个构造函数
        /* function Demo(){
            this.a = 1
            this.b = 2
        }
        //创建一个Demo的实例对象
        const d = new Demo()
        console.log(Demo.prototype) //显示原型属性
        console.log(d.__proto__) //隐式原型属性
        console.log(Demo.prototype === d.__proto__)
        //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
        Demo.prototype.x = 99
        //通过显示属性与隐式属性拿到的值是一个东西
        //显示d对象
        console.log('@',d) */
    </script>