组件的目的是为了复用，如下图最顶上的相当于最外层的div,第二层相当于div中的3个矩形框，每个大矩形框中又包含2个和3个组件（通常我们看一个官网，最顶上的导航栏和底部的联系栏通常都不会改变，只有中间的内容部门在发生变化，那这些公共的组件就可以抽离出来应用于所有页面）
说白了就是一些可复用的模板
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>java</title>
</head>
<body>
<!--view层-->
<div id="app">
<!--使用自定义组件，从原始组件遍历出数据，再将数据使用v-bind绑定到一个临时变量，再将变量传给自定义组件的props，进而实现组件之间的传参-->
<huangxb v-for="item in langs" v-bind:yuyan="item"></huangxb>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!--定义一个组件：1）包含组件名，2）template模板，模板中就是我们的页面，vue的第一部分-->
<!--使用props接收传递的数据-->
Vue.component("huangxb",{
props: [‘yuyan‘],
template: ‘<li>{{yuyan}}</li>‘
});
var vm = new Vue({
// Model：数据
el: "#app",
data: {
langs: ["C++","JAVA","C","Object-C"]
}
});
</script>
</body>
</html>
自定义组件和初始组件之间属于同级关系，要想在他们之间传递参数需要使用一个中间变量，使用v-bind进行绑定。
原文：https://www.cnblogs.com/yuruotianxin/p/14841668.html