1.什么是组件：
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
注：
组件名不可以使用已经存在的html元素;
组件中的data数据是一个函数，并且要有一个返回值
···
（1）全局组件
HTML
<div id='app'>
<自定义的组件标签名字></自定义的标签名字>
</div>
<script>
Vue.component('组件名字',{
template:`
<ul>
<li>
<a href="">首页</a>
</li>
</ul>
`
})
new Vue({
el:"选择器"
})
</script>
（2）局部组件
HTML
<div id='app'>
<自定义的组件标签名字></自定义的标签名字>
</div>
<script>
new Vue({
el:'#app',
data:{},
methods:{},
filters:{},
computed:{},
components:{
'组件名t':{
template:`
<ul>
<li>
<a href="">首页</a>
</li>
</ul>
`
}
}
})
</script>
2.弹出框
<div id='app'>
//全局组件
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-component',{
template:`
<div>
<p>{{mess}}</p>
<button @click='alt'>按钮</button>
</div>
`,
data:function(){
return{
mess:'我是组件中的值'
}
},
methods:{
alt:function(){
alert('bdsjjf')
}
}
})
new Vue({
el:"#app"
})
</script>
3.组件之间的传值
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div>
<my-tit v-bind:tit='title'></my-tit>
<my-fruit v-bind:fruList='list'></my-fruit>
</div>
`,
data:function(){
return{
list:['apple','pear','banana'],
title:'水果列表'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-fruit',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
1.png
4.组件之间的传值
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>这是父组件</h1>
<my-child v-bind:num='msg'></my-child>
</div>
`,
data:function(){
return{
msg:'我是父组件中的值'
}
}
})
Vue.component("my-child",{
props:['num'],
template:`
<div>
<ul>
<li>这是子组件的内容1</li>
</ul>
<a href='#'>{{num}}</a>
</div>
`
})
new Vue({
el:"#app"
})
</script>
2.png
网友评论