组件(component): 是vue最强大的功能之一 组件化开发
组件可以扩展 HTML 元素，封装可重用的代码。
全局
局部
组件之间的传值******
父传子 用属性传
子传父 用事件传
同级之间传值
一、父传子（用属性）
<div id="app">
<hhh></hhh>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
Vue.component('hhh',{
template:`
<div>
<h1>sss</h1>
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
</div>
`//不能有两个同级别元素 需要加一个父级
})
new Vue({
el:'#app',
components:{
// 'hhh':{
// template:``
// }
}
})
</script>
父传子添加按钮
<div id="app">
<my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<div>
<input type="text" v-model="txt">
<button v-on:click="an">添加</button>
<my-son v-bind:txt="arrs"></my-son>
</div>
`,
data:function(){
return{
txt:'',
arrs:['苹果','Apple']
}
},
methods:{
an:function(){
this.arrs.push(this.txt),
this.txt=''
}
}
}),
Vue.component('my-son',{
props:['txt'],
template:`
<ul>
<li v-for="(a,x) in txt"> {{a}} <button v-on:click="shan(x)">删除</button></li>
</ul>
`,
methods:{
shan:function(ind){
this.txt.splice(ind,1)
}
}
}),
new Vue({
el:'#app'
})
</script>
二、子传父（用事件传）
<div id="app">
<my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script type="text/javascript">
Vue.component('my-father',{
template:`
<div>
<h1>{{mess}}</h1>
<my-child @ss='revMsg'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:`
<button @click='sendFather'>给父级</button>
`,
data:function(){
return{
msg:'hhhhhhhh'
}
},
methods:{
sendFather:function(){
// this.$emit('自定义事件','参数')
this.$emit('ss',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
子传父表单添加
<div id="app">
<my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script type="text/javascript">
Vue.component('my-father',{
template:`
<div>
<h1>我是父组件</h1>
<p>子组件传来的数据为:</p>
<ul>
<li>{{mess}}</li>
</ul>
<my-child @send='revmsg'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
revmsg:function(msg){
this.mess=msg
}
}
})
Vue.component('my-child',{
template:`
<div>
<h1>我是子组件</h1>
<input v-model='txt'>
<button @click='add'>向父组件传递参数</button>
</div>
`,
data:function(){
return{
txt:''
}
},
methods:{
add:function(){
this.$emit('send',this.txt)
}
}
})
new Vue({
el:'#app'
})
</script>
三、同级之间传值
<div id="app">
<borther></borther>
<borthers></borthers>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var bus=new Vue();
Vue.component('borther',{
template:`
<div>
<h1>我是哥哥</h1>
<button @click="btn">点我</button>
</div>
`,
data:function(){
return{
txt:'我是妹妹'
}
},
methods:{
btn:function(){
bus.$emit('dada',this.txt)
}
}
}),
Vue.component('borthers',{
template:`
<div>
<h1>我是弟弟</h1>
<a href="">{{txt}}</a>
</div>
`,
data:function(){
return{
txt:''
}
},
mounted:function(){
bus.$on('dada',msg=>{//这里需要使用箭头函数，用函数this会指向Vue实例，而用箭头函数会指向当前的这个组件
this.txt=msg
})
}
})
new Vue({
el:"#app"
})
</script>
