组件化是vue.js中的重要思想
1.它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
2.任何的应用都会被抽象成一颗组件树
创建组件构造器： 调用Vue.extend()方法
注册组件：调用Vue.component()方法
使用组件：在Vue实例的作用范围内使用组件
创建组件的方法：Vue.extend({对象})
注册组件的方法：Vue.component()
<body> <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> </div> <script src="../js/vue.min.js"></script> <script> //1.创建组件 const cpn = Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容，哈哈哈</p> <p>我是内容，呵呵呵</p> </div>` }); // 注册组件 // Vue.component(‘组件的标签名，就是使用在html里面的标签‘,cpn); Vue.component(‘my-cpn‘,cpn); const app = new Vue({ el:‘#app‘, data:{}, methods: { }, }) </script> </body>
当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue实例下使用；如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件
子组件是不能引用父组件或者Vue实例的数据的。
但是，在开发中，往往一些数据确实需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多的数据。
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。
通过props向子组件传递数据 父传子
通过事件向组件发送消息 子传父
在组件中，使用选项props来声明需要从父级就收到的数据
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。
在组件中，使用选项 props 来声明需要从父级接收到的数据
1. 字符串数组，数组中的字符串就是传递时的名称
2.对象形式：对象可以设置传递时的类型，也可以设置默认值和类型等
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件了，之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件
自定义事件的流程：
在子组件中，通过$emit() 来触发事件。
在负组件中，通过v-on 来监听组件事件。
<body>
<!-- 父组件模板 -->
<div id="app">
<!-- 第三步：使用组件 -->
<!-- 第五步：父组件接受子组件发来的事件 -->
<cpn @cpnclick="itemclick"></cpn>
</div>
<!-- 子组件的模板 -->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 第一步：定义子组件
const cpn = {
template:‘#cpn‘,
// 自定义组件里面data是一个函数，并且返回的是对象
data(){
return{
// 假数据：分类
categories:[
{id:‘a‘,name:‘热门推荐‘},
{id:‘b‘,name:‘手机数码‘},
{id:‘c‘,name:‘家用家电‘},
{id:‘d‘,name:‘电脑办公‘}
]
}
},
// 组件里面添加方法
methods: {
btnClick(item){
console.log(item);
// 第四步：子组件向父组件发射事件
// 在这里自定义的事件名字尽可能用小写
this.$emit(‘cpnclick‘, item)
}
},
}
//根组件
const app = new Vue({
el: ‘#app‘,
data:{},
//第二步：注册组件
components:{
cpn
},
methods:{
// 父组件中的方法，用来接收到子组件发来的事件
itemclick(item){
console.log(‘itemClick‘,item);
}
}
})
</script>
</body>
原文：https://www.cnblogs.com/Isla-xigua/p/13167947.html