vue学习第8天组件

组件的使用流程：

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

1.调用Vue.extend()方法创建组件构造器 2.使用Vue.component()方法注册组件 3.在Vue实例的作用范围内使用组件

上代码：

    const cpnC = Vue.extend({
        template:`
        <div>
            <h2>我是标题</h2>
            <p>我是内容<p>
            <p>我也是内容<p>
        </div>`
    })

　　通过这种方式来创建一个组件构造器，template后面那个是反引号前面说过了，这个东西可以换行。下面就是组件的内容了。然后我们注册一下组件：

Vue.component('my-cpn',cpnC)

　　这样组件的名字就叫my-cpn了，之后就可以使用了：

<div id='app'>
    <my-cpn></my-cpn>
</div>

　　效果：

非常简单好用。

全局组件和局部组件：

　　上面那种方式注册的就是全局组件，意味着可以在所有的vue实例里使用。局部组件的代码如下：

const app = new Vue({
        el:"#app",
        data(){
            return{  
            }
        },
        components:{
            cpn:cpnC
        }
    });

　　在实例中设置components来进行注册（前面Vue.extend中的内容也要，因为你要知道组件都是啥）。这里的含义是组件的标签是cpn，组件的内容是cpnC也就是前面写好内容的那个对象。这个在哪里注册只能在哪里使用。这就是局部组件。

　　父组件和子组件：

　　子组件是在父组件内注册的组件，我们定义两个组件：

    const cpnC1 = Vue.extend({
        template:`
        <div>
            <h2>我是标题1</h2>
            <p>我是内容1<p>
        </div>`
    })

    const cpnC2 = Vue.extend({
        template:`
        <div>
            <h2>我是标题2</h2>
            <p>我是内容2</h2>
            <cpn1></cpn1>
        </div>
        `,
        components:{
            cpn1:cpnC1
        }
    })

　　我们发现cpnC2里面注册了cpnC1，之后我们在使用cpnC2的时候里面就会携带了cpnC1.这里要注意的是Vue实例本身是一个root组件，所以你要使用cpnC2仍然要在里面的components注册下。

　　注册组件的语法糖：

    const cpnC = Vue.extend({
        template:`
        <div>
            <h2>我是标题</h2>
            <p>我是内容<p>
            <p>我也是内容<p>
        </div>`
    })

    Vue.component('my-cpn',cpnC)

　　这个是上面的写法，语法糖就是省略了上买呢的部分：

Vue.component('my-cpn',{
        template:`
        <div>
            <h2>我是标题</h2>
            <p>我是内容<p>
            <p>我也是内容<p>
        </div>`
    })

　　这样就可以了。那么怎样写代码能让代码更加规范呢，因为在template后面如果写太多会很乱，我们可以在script标签中写一个，并把标签设置一个id：

<script type="text/x-template" id='cpn'>
<div>
    <h2>我是标题</h2>
    <p>我是内容<p>
    <p>我也是内容<p>
</div>
</script>

　　type定义为text/x-template类型，下面我们的template中的内容是：

    const cpnC = Vue.extend({
        template:`#cpn`
    })

　　这样就显得清晰多了。

　　实际开发中这样用比较多，使用template标签就可以了

<template id="cpn">
    <div>
        <h2>我是标题2</h2>
        <p>我是内容2</p>
        <p>我也是内容2</p>
    </div>
</template>

　　更加简单就使用这种写。

　　在组件中使用data函数来存放数据，data(){return{xxx}}把所有内容卸载return后面。为什么要这样写呢？因为data中如果直接存放数据则所有的组件都共享同一套的数据，return返回一个对象则每一个组件在创建后都分配了自己的内存，都有保存有自己的一套数据，这样你每次使用其中某一个组件，只有这个组件的data变化，每个组件的数据都是互相独立得了。如果你的设计就是希望大家共享同一套数据，那么data中return的内容应该是一个obj然后定义const obj=｛｝把数据写在这里。

　　组件间的通信：

　　组件间的通信常用父子组件的通信，一些子组件并不会直接向服务器发出请求，都是将数据存放在父组件然后传递给子组件，父组件统一发出请求。

　　首先是父组件传递给子组件：

　　父组件代码：

    const app = new Vue({
        el:"#app",
        data:{
            info:{
                name:'why',
                age:18,
                height:11.88
            }
        },
        components:{
            cpn
        }
    })

　　这里父组件为app，想要把info里面的内容送给子组件cpn使用。于是使用components注册了子组件。下面是子组件的定义的代码：

    const cpn={
        template:'#cpn',
        props:{
            cInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        }
    }

　　props用来接受传递过来的值。template中定义了组件的名字叫做cpn。之后我们在template标签中写出组件的内容：

<template id="cpn">
    <h2>{{cInfo}}</h2>
</template>

　　组件把父组件传过来的值，保存在cInfo的值进行了打印，然后我们就可以使用他了

<div id='app'>
    <cpn :c-info="info"></cpn>
</div>

　　这里我们使用了cpn组件，这个组件为了获取到传过来的cinfo中的值，需要使用v-bind:c-info="info"进行绑定，这里c-info之所这样写是因为驼峰写法不被识别。

vue学习第8天 组件

猜你喜欢