组件初始化、父子组件传值、插槽

Vue学习二——组件初始化、父子组件传值、插槽

一、组件化初始化
1.什么是组件以及组件化？
如果我们将一个页面中所有的处理逻辑全部放到一起。处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。为此，引出组件化的思想：

• 将一个完整的页面分成很多组件
• 每一个组件都用于实现页面的一个功能块
• 而每一个组件又可以进行细分
  
  组件化提供了一种抽象，让我们可以开发一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一棵组件树。
  
  2.注册组件的基本步骤

1.创建组件构造器
2.注册组件
3.使用组件

注册组件的步骤视图：

<div id="app">
        <!-- 使用组件 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>

    <script src="../JS/vue.js"></script>
    <script>
        // 1.创建组件构造器对象
        const cpnC = Vue.extend({
     
            template : `
            <div>
                <h2>我是标题</h2>
                <p>hahaha</p>
            </div>`
        })
        // 2.注册组件
        Vue.component('my-cpn',cpnC)

        let app = new Vue({
     
            el : '#app',
            data : {
     
                message : 'hello'
            }
        })
    </script>

页面显示结果：

我是标题
hahaha
我是标题
hahaha

注册组件步骤解析：

1. Vue.extend():

    调用Vue.extend()创建的是一个组件构造器
    通常在创建组件构造器时，传入template代表我们自定义组件的模板
    该模板就是在使用到组件的地方，要显示的HTML代码
    事实上，这种写法在Vue2.x的文档中几乎以及看不到了，它会直接使用语法糖，是基础
   

2. Vue.component():

   调用Vue.component()是将刚才的组件构造器注册成一个组件，并且给他起一个组件的标签名称
   所以需要传递两个参数：
   	1.注册组件的标签名；
   	2.组件构造器
   

3. 组件必须挂载在某一个Vue实例下，否则它不会生效

组件分类

1. 全局组件和局部组件

   全局注册组件的写法：
   		Vue.component('cpn',cpnC)
   		//这种写法在任何一个vue实例中均可以使用
   局部注册组件的写法：
   		//只可以在所挂载的某个实例中使用
   

let app = new Vue({
            el : '#app',
            data : {
                message : 'hello'
            },
            components : {
                // cpn就是使用组件时的标签名
                // 局部注册组件，仅在app中可以使用
                cpn : cpnC
            }
        })

2. 父组件和子组件
   在创建某一个组件中注册了另一个组件，其中创建组件的称为“父组件”，注册的组件称为“子组件”。

 <div id="app">
    <cpn2></cpn2>
   </div>
   <script src="../JS/vue.js"></script>
   <script>
    // 1.创建第一个组件构造器对象(子组件)
    const cpnC1 = Vue.extend({
     
        template : `
        <div>
            <h2>我是标题</h2>
            <p>hahaha</p>
        </div>`
    })
// 创建第二个组件构造器(父组件)
    const cpnC2 = Vue.extend({
     
        template : `
        <div>
            <h2>我是标题</h2>
            <p>heiheiheihei</p>
            <cpn1></cpn1>
        </div>
        `,
        //在组件二中注册组件一
        components : {
     
            cpn1 : cpnC1
        }
    })
    // 2.注册组件
    // Vue.component('my-cpn',cpnC1)
    // root组件
    let app = new Vue({
     
        el : '#app',
        data : {
     
            message : 'hello'
        },
        components : {
     
            cpn2 : cpnC2
        }
    })
</script>

在父组件中注册的子组件其作用域就是父组件，要是想要在全局作用还需要在vue实例中注册。

注册组件的语法糖：

1. 全局组件语法糖

<script>
Vue.component('cpn1',{
     
            template : `
            <div>
                <h2>我是全局组件语法糖</h2>
                <p>hahaha</p>
            </div>`
        })
</script>

3. 局部组件语法糖

<script>
let app = new Vue({
     
            el : '#app',
            data : {
     
                message : 'hello'
            },
            components : {
     
                'cpn2' : {
     
                    template : `
                         <div>
                             <h2>我是局部组件语法糖</h2>
                             <p>hahaha</p>
                         </div>`
                }
            }
        })
</script>

组件模板的分离写法：

	使用<script>标签：<script type="text/x-template" id="cpn">

<div id="app">
        <!-- 使用组件 -->
        <cpn>