组件（component）：是Vue最轻大的功能之一。 组件化开发
特点：组件可以扩展HTML元素，封装可重用代码。
组件分为全局与局部
全局
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
//全局：
Vue.component('my-component',{
template:`
<div>
<h1>这是一个组件</h1>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</div>
`
})
new Vue({
el:'#app'
})
</script>
局部
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
components:{
'my-component':{
template:`
<div>
<h1>这是一个组件</h1>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</div>
`
}
}
})
</script>
组件的命名不可以使用HTML中已有的元素
组件中也可以写data、methods
data需要写在一个函数的返回值中
<div id='app'>
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-component",{
template:`
<div>
<h1>{{msg}}</h1>
<button @click='alt'>按钮</button>
</div>
`,
data:function(){
return{
msg:'dcgf'
}
},
methods:{
alt:function(){
alert(11111)
}
}
})
new Vue({
el:'#app'
})
</script>
可以同时写多个组件，组件之间也可以相互传值
组件间的相互传值
1 父传子 用属性传
2 子传父 用事件传
3 同级之间传值
父传子（用属性传）
选项props是父子组件间的桥梁
props格式为：props：[' 自定义属性'],
<div id='app'>
<my-content></my-content>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-content",{
template:`
<div>
<h2>我是my-content组件的标题</h2>
<my-child v-bind:message='msg'></my-child>
</div>
`,
data:function(){
return{
msg:'dgddbghfghfnh'
}
}
})
Vue.component("my-child",{
props:['message'],
template:`
<div>
<h3>我是my-child组件中的标题</h3>
<p>{{message}}</p>
</div>
`
})
new Vue({
el:'#app'
})
</script>
子传父（用事件传）
this.emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件
<div id="app">
<father></father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<h1>{{text}}</h1>
<son @dada='fathertxt'></son>
</div>
`,
data:function(){
return{
text:''
}
},
methods:{
fathertxt:function(txt){
this.text=txt
}
}
}),
Vue.component('son',{
template:`
<button @click="an">点击我</button>
`,
data:function(){
return{
txt:'古娜拉黑暗之神'
}
},
methods:{
an:function(){
this.$emit('dada',this.txt)
}
}
}),
new Vue({
el:'#app'
})
</script>
点击前
QQ拼音截图未命名.png
点击后
QQ拼音截图未命名.png
同级之间传值
<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>
