Vue 非单文件组件

2024-03-14 19:29 由巨大的石头发表于 #前端开发

概述

　　Vue 非单文件组件的创建与使用。

知识点

　　组件的定义：组件是能实现某个功能或具有某种属性的代码和资源集合。
　　创建非单文件组件需要3个步骤：
- 创建组件
- 注册组件
- 使用组件

创建组件

　　使用Vue.extend(options)创建，格式与new Vue时几乎一样，但是这里有两点要注意；

不需要写el,因为组件是可复用的，不能固定在某一容器内。
data必须写成函数,如果写成对象，这样组件复用时会引用同一个数据，所以只能写成函数形式，不同的组件data数据才会互不干扰。

如下图创建了2个组件：school 组件和student组件

 1  //创建school组件
 2     const school =Vue.extend({
 3         template:`<div>
 4             <h2>学校：{{schoolName}}</h2>
 5             <h2>地址：{{address}}</h2>
 6             </div>`,
 7         data(){
 8             return{
 9                 schoolName:'城西小学',
10                 address:'南京市鼓楼区'
11             }
12             
13         }
14     });
15     //创建student 组件
16     const student =Vue.extend({
17         template:`<div>
18             <h2>学生：{{studentName}}</h2>
19             <h2>年龄：{{age}}</h2>
20             <h2>成绩：{{score}}</h2>
21             <button @click=add>请点击我，成绩加一</button>
22             </div>`,
23         data(){
24             return{
25                 studentName:'李在容',
26                 age:14,
27                 score:56
28             }
29         },
30         methods:{
31             add(){
32                 this.score++;
33             }
34         }
35     });

注册组件

注册局部组件

在new Vue中使用components选项实现组件局部注册。

如下图，我们在容器root 和root2上注册了相同的局部组件。

var vm=new Vue(
        {
            el:'#root',
            //注册局部组件
            components:{
                xuexiao:school,
                xuesheng:student
            }
        }
    )
    var vm2=new Vue(
        {
            el:'#root2',
            //注册局部组件
            components:{
                xuexiao:school,
                xuesheng:student
            }
        }
    )

注册全局组件

使用Vue.component(组件名,组件)。

如下图, 定义了一个组件，然后注册成全局组件。

 1  //创建hello组件
 2      const hello =Vue.extend({
 3         template:`<div>
 4             hello
 5             </div>`,
 6         data(){
 7             return{
 8                 msg:'我是hi组件',
 9             }
10         },
11         methods:{
12             add(){
13                 this.score++;
14             }
15         }
16     });
17     //注册全局组件
18     Vue.component('hello',hello);

使用组件

如下代码: 创建了3个组件student, school , hello组件

student 和 school组件被注册成局部组件，hello组件注册成全局组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root" style="border: 1px solid yellow; margin-top: 50px;">
        <!-- 编写组件标签 -->
        我使用的是局部组件
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
    </div>
    <div id="root3" style="border: 1px solid rgb(17, 0, 255); margin-top: 50px;">
        使用全局组件
        <hello></hello>
    </div>
    <div id="root2" style="border: 1px solid red; margin-top: 50px;">
        <!-- 编写组件标签 -->
        我使用的是局部组件
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
    </div>
   
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示
    //创建school组件
    const school =Vue.extend({
        template:`<div>
            <h2>学校：{{schoolName}}</h2>
            <h2>地址：{{address}}</h2>
            </div>`,
        data(){
            return{
                schoolName:'城西小学',
                address:'南京市鼓楼区'
            }
            
        }
    });
    //创建student 组件
    const student =Vue.extend({
        template:`<div>
            <h2>学生：{{studentName}}</h2>
            <h2>年龄：{{age}}</h2>
            <h2>成绩：{{score}}</h2>
            <button @click=add>请点击我，成绩加一</button>
            </div>`,
        data(){
            return{
                studentName:'李在容',
                age:14,
                score:56
            }
        },
        methods:{
            add(){
                this.score++;
            }
        }
    });
   
    var vm=new Vue(
        {
            el:'#root',
            //注册局部组件
            components:{
                xuexiao:school,
                xuesheng:student
            }
        }
    )
    var vm2=new Vue(
        {
            el:'#root2',
            //注册局部组件
            components:{
                xuexiao:school,
                xuesheng:student
            }
        }
    )
    var vm3=new Vue(
        {
            el:'#root3',
           
        }
    )
     //创建hello组件
     const hello =Vue.extend({
        template:`<div>
            hello
            </div>`,
        data(){
            return{
                msg:'我是hi组件',
            }
        },
        methods:{
            add(){
                this.score++;
            }
        }
    });
    //注册全局组件
    Vue.component('hello',hello);
</script>
</html>

效果图

使用上面的代码执行后的效果如下
如下图，虽然root和root2使用了相同的组件，但是每个组件互不影响。第一个组件里的年龄是59，第二个组件的年龄是56：