第六节：Vue组件化开发(2)-Vue组件初次使用_简述在vue组件化环境下新增vue-elementul插件开发的步骤-CSDN博客

本文链接：https://blog.csdn.net/qq_30442207/article/details/108812894

文章目录

前言
系列文章目录，Vue学习目录，每一章都有代码例子说明
二、Vue组件初次使用
ALL：组件模板的学习目录
上一节：第六节：Vue组件化开发(1)-什么是组件
下一节：第六节：Vue组件化开发(3)-Vue组件模板的分离写法

前言

本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网

系列文章目录，Vue学习目录，每一章都有代码例子说明

二、Vue组件初次使用

2.1 创建组件的第一种方式：

使用Vue.component创建一个组件

第一个参数是组件的名称（就是我们后续使用的元素标识）
第二个参数是对象，里面有很多参数，现在只说一个template（模板），就是我们存放展示内容的地方

    Vue.component('component1', {
        template: `
    	<div>
    	    <h2>我的第一个组件</h2>
    	    <h2>你们好</h2>
   		</div>
    `
    });

2.2 创建组件的第二种方式：

在Vue实例里注册,先定义好对象，然后在实例的components属性上把组件注册

	const component2 = {
        template: `
    	<div>
    	    <h2>我的第二个组件</h2>
    	</div>
    `
    }


    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })

2.3 使用组件

1）怎么使用Vue的创建组件？

在创建组件的时候，我们都是有定义一个标志，如果是使用Vue.component创建就是第一个参数，如果是在components注册就是对象的名称

2）使用（直接用标识名称来使用组件）

组件的使用必须在Vue实例的div里，超出的实例，vue无法管理就无法使用这个组件了

<div id="app">
 	<!--直接用标识名称来使用组件-->
    <component1></component1>
    <!--组件复用-->
    <component1></component1>
    <component1></component1>
    
    <component2></component2>
</div>

<!--超出的Vue实例，vue无法管理就无法使用这个组件了-->
<div id="app1">
    <component1></component1>
</div>

2.4 完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app">
    <component1></component1>
    <!--组件复用-->
    <component1></component1>
    <component1></component1>

    <component2></component2>
</div>
<!--超出的Vue实例，vue无法管理就无法使用这个组件component1了-->
<div id="app1">
    <component1></component1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 第一种：使用Vue.component创建一个组件
     * */
    Vue.component('component1', {
        template: `
    <div>
        <h2>我的第一个组件</h2>
    </div>
    `
    });
    /**
     * 第二种：在Vue实例里注册
     * 先定义好对象，再实例的components属性上把组件定义好
     * @type {{template: string}}
     */
    const component2 = {
        template: `
    <div>
        <h2>我的第二个组件</h2>
    </div>
    `
    }
    //组件的使用必须在Vue实例的div里，超出的实例，vue无法管理就无法使用这个组件了
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })
</script>
</html>