组件的目的是为了复用,如下图最顶上的相当于最外层的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