入门文章：
Vue封装组件的过程

Vue组件封装过程

● 首先，创建一个组件

● 然后，注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

组件创建方法（3）

A、调用Vue.extend()，创建名为myCom的组件，template定义模板的标签，模板的内容需写在该标签下

var myCom = Vue.extend({
    template: '<div>这是我的组件</div>'
})

B、<template id=‘myCom’>标签创建，需要加上id属性


<template id="myCom">
    <div>这是template标签构建的组件,id作为组件的实例名</div>
</template>

C、<script type=‘text/x-template’ id=‘myCom’>,需加id属性，同时还得加type=“text/x-template”,加这个是为了告诉浏览器不执行编译里面的代码

<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>

注册组件（2）

分为全局、局部。

A1、全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。

我们先用全局注册，注册上面例子中创建的myCom组件

Vue.component('my-com',myCom)

A2、全局注册语法糖：不需要创建直接注册的写法

Vue.component('my-com',{
    'template':'<div>这是我的组件</div>'
})

'my-com’为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。

A3、如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

Vue.component('my-com',{
    template: '#myCom'
})

B1、局部注册：只能在注册该组件的实例中使用，（vue实例内部创建，内部使用）

var app = new Vue({
    el: '#app',
    components: {
        'my-com': myCom
<!-- 简写： myCom  -->
    }
<!-- 该实例只能在app内部使用 -->
})

B2、局部注册语法糖：

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '<div>这是我的组件</div>'
        }
    }
})

B3、<template>及<script>创建的组件，局部注册

var app = new Vue({

    el: '#app',
    components: {
        'my-com': {
           template: '#myCom'
        }
    }
})

组件间的数据传递

通过props向子类组件传递数据。通过emit事件向父类组件传递数据。

image-20210112214803918

Vue中的props数据流

通过在注册组件中申明需要使用的props，然后通过props中与模板中传入的对应的属性名，去取用这些值

<!--组件调用 -->
<!--父组件 app-->
<div id="app">
<!--v-bind形式向 cm绑定外部组件传递过来的数据 movies-->
    <cpn :cm="movies">
<!--子组件数据 -->

    </cpn>

</div>

<!--组件创建 -->

<template id="cpn">
    <div>
        <p>{{cm}}</p>
    </div>
</template>
<script>
// 组件注册
    const cpn= {
        template:'#cpn',
        data(){

            return {}
        },
        props :['cm'],
        //子组件中 props 声明cm属性 从外部接收数据
        methods:{

        }
    }

    //父组件
    const app = new Vue({

    el:'#app',
    // 父组件数据
     data:{
        message:'你好',
        movies:['事件','江南']
    },
    // 组件注册
    components:{cpn }
})
</script>

image-20210112223221489

props写法

  1. 数组

    props:[]

  2. 对象

    props:{
    cm:Array,
    <!-- 变量 ： 数据类型 -->
    cm2:{
    type:Array,
    default:'没有',
    <!-- 可以设置默认值 -->
    required：true
    <!-- 设置该组件使用时必须 给cm2属性传值  -->
    }
    }
props总结
image-20210112225148007
props中的属性命名不支持驼峰式，因为html忽略大小写。

emit

在我们的子组件要向父组件传递数据时，需要用到自定义事件。

什么是自定义事件

用于子组件向父组件传递数据
v-on不仅仅用于监听DOM事件，也可以用于组件间的自定义事件

自定义事件使用

在子组件中事件，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件的事件

<div id="app">
<!--   内部事件 item_click 绑定 外部事件名称 p_click -->
<cpn v-on:item_click="p_click"></cpn>
</div>

<template id="cpn">
    <div>
       <button v-for="item in categories" @click="btn_click(item)">{{item.name}}</button>
    </div>
</template>

<script>
    const cpn ={
        template:"#cpn",
        data() {
            return{
                //定义子组件的数据
                categories:[
                    {id:'1231',name:'热门推荐'}
                    ,{id:'1234',name:'家具'},
                    {id:'1235',name:'生活用品'}]
            }
        },
        methods:{
            btn_click(item){
                console.log(item)
                //自定义事件名称 item_click 用于v-on 方式绑定外部组件的事件
                this.$emit('item_click',item)
            //    emit 参数 自定义事件名称，参数列表
            }
        }
    }


    const app = new Vue({
        el:"#app",
        data:{
            message:"你好啊啊",

        },
        components:{
            cpn
        },
        methods:{
            p_click(item){
                console.log('父组件接收:'+item.name)
            }
        }
    })
</script>

image-20210113101141622