创建组件 （有多种方式列出一种）
使用Vue.extend来创建组件模板对象
var com1 = Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
//通过template属性，制定了组件要展示的html结构
})
使用Vue.component完场组件的创建
Vue.component('组件的名称',创建出来的组件模板对象)
Vue.component('myCom1',com1)
使用组件
如果要使用组件，直接把组件的名称，以html标签的形式引入即可
<my-com1></my-com1>
具体细节参考
父组件传子组件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<abc v-bind:goods="goodsList">
</abc>
</div>
<template id="abc">
<div>
<div v-for="good in goods">
<p>{{good.name}}</p>
<p>{{good.price}}</p>
</div>
</div>
</template>
<script>
// 子组件可以有自己的data
Vue.component("abc",{
template:"#abc",
props:["goods"]
});
new Vue({
el:'#app',
data:{
goodsList:[
{name:"aaa",price:100},
{name:"bbb",price:101},
{name:"ccc",price:102},
{name:"ddd",price:103}
]
}
})
</script>
</body>
</html>
主要是利用 子组件的 props属性， 在子组件标签上将父组件的属性与子组件中的属性绑定即可
子组件传父组件
流程：在子组件中通过$emit来触发指定的事件 在父组件中通过v-on来监听这个事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
// 父组件通过v-on监听子组件的事件
<abc @zzz="recived">
</abc>
</div>
<template id="abc">
<div>
<input type="text" v-model="content" @keyup.enter="search()">
</div>
</template>
<script>
// 子组件可以有自己的data
Vue.component("abc",{
template:"#abc",
data() {
return {
content:""
}
},
methods: {
search:function(){
//通过自定义事件将内容传递给父组件
//zzz 就是自定义事件名
this.$emit("zzz",this.content)
}
}
});
new Vue({
el:'#app',
methods:{
recived:function(data){
console.log(data);
}
}
})
</script>
</body>
</html>
