组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，
全局组件
<body>
<div id="app">
<ul>
<prcoute-com v-for="(item, index) in list" :key="index" :prcoute="item"></prcoute-com>
</ul>
</div>
<script>
Vue.component("prcoute-com", {
props: ['prcoute'],
template: ` <li>
<h1>产品名称：{{prcoute.title}}</h1>
<h1>产品描述：{{prcoute.dis}}</h1>
<p>价格：{{prcoute.price}}</p>
</li>`,
})
let app = new Vue({
el: "#app",
data: {
list: [{
title: "产品一",
price: 10,
dis: "你好吗？"
}, {
title: "产品二",
price: 20,
dis: "你好吗？？？"
}, {
title: "产品三",
price: 220,
dis: "你好吗？????"
}, ]
}
})
</script>
</body>
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
局部注册
var Child = {
template: '<div>一个自定义组件</div>'
}
new Vue({
// ...
components: {
// <my-child></my-child> 将只在父组件模板中可用
'my-child': Child
}
})
data 必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
var counter = {
template:`<button @click="num++">{{num}}</button>`,
data:function(){return {num:1}}
}
new Vue({
el:"#app",
components:{
counter,
}
})
组件调用
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
父组件向子组件传值
通过 Prop 向子组件传递数据
div id="app">
<school v-for="(item, index) in schoolList" @kkk='changeEvent' :key="index" :sname='item'></school>
<div>
选择的学校是： {{schoolName}}
</div>
</div>
<script>
Vue.component('school', {
props: ['sname'],
template: `<div><h5>请选择学校：{{sname}}</h5><button @click='choose(sname)'>确定</button></div>`,
methods: {
choose(sname) {
this.$emit("kkk", sname)
}
},
})
let app = new Vue({
el: '#app',
el: '#app',
data: {
schoolList: ['清华', '北大', '浙大', '交大'],
schoolName: '',
},
methods: {
changeEvent(data) {
this.schoolName = data;
}
},
})
</script>
这里通过props就可以获得父组件的item的值
使用$children获取子组件和父组件对象
父组件代码：
this.msg2=this.$children[0].msg
使用$ref获取指定的子组件
子组件向父组件传值
通过$emit向父组件传递数据
<div id="app">
<school v-for="(item, index) in schoolList" @kkk='changeEvent' :key="index" :sname='item'></school>
<div>
选择的学校是： {{schoolName}}
</div>
</div>
<script>
Vue.component('school', {
props: ['sname'],
template: `<div><h5>请选择学校：{{sname}}</h5><button @click='choose(sname)'>确定</button></div>`,
methods: {
choose(sname) {
this.$emit("kkk", sname)
}
},
})
let app = new Vue({
el: '#app',
data: {
schoolList: ['清华', '北大', '浙大', '交大'],
schoolName: '',
},
methods: {
changeEvent(data) {
this.schoolName = data;
}
},
})
</script>
**使用$parent.获取父组件对象，然后再获取数据对象
使用$root获取**
二者用法相似
<div id="app">
<school v-for='(item,index) in schoolList' :sname='item' :key='index'></school>
<div >
选择的是：
{{schoolName}}
</div>
</div>
<script>
Vue.component('school',{
props:['sname'],
template:`<div><h5>请选择学校：{{sname}}</h5><button @click='$root.change(sname)'>确定</button></div>`,
// methods:{
// choose:function(sname){
// this.$emit('kkk',sname);
// }
// }
})
let app=new Vue({
el:'#app',
data:{
schoolList: ['清华', '北大', '浙大', '交大'],
schoolName: '',
},
methods:{
change:function(data){
console.log(data)
this.schoolName=data;
}
}
})