笔记：
组件（component）：组件化开发，组件可以扩展HTML元素，封装可重用的代码。
全局组件
局部组件
注：组件名不可以使用已经存在的HTML元素
注：组件中的data数据是一个函数，并且要有夜歌返回值（return）
组件1.
<div id="app">
<my-father></my-father>
</div>
<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","banana","pear"],
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>
组件2.
<div id="app">
<my-tomponent></my-tomponent>
</div>
<script>
Vue.component('my-tomponent',{
template:`
<div>
<p>{{msg}}</p>
<button @click='btn'>按钮</button>
</div>
`,
data:function(){
return{
msg:'asdfasf'
}
},
methods:{
btn:function(){
alert(21312313)
}
}
})
new Vue({
el:"#app"
})
</script>
组件的嵌套
<div id='app'>
<my-father></my-father>
</div>
<script src='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>
<li>这是子组件的内容2</li>
<li>这是子组件的内容3</li>
</ul>
<a href='#'>{{num}}</a>
</div>
`
})
new Vue({
el:"#app"
})
</script>
组件中的传值，父传子
<div id='app'>
<my-father></my-father>
</div>
<script src='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>
组件中的传值,子传父
<div id="app">
<my-fa></my-fa>
</div>
<script>
Vue.component('my-f',{
template:`
<div>
<h1>父组件</h1>
<a>内容:{{msg}}</a>
<my-c @click='fun2'></my-c>
</div>
`,
data:function(){
return{
msg:""
}
},
methods:{
fun2:function(txt){
this.msg=txt
}
}
})
Vue.component('my-c',{
template:`
<div>
<h1>子组件</h1>
<input v-model="arr">
<button @click='fun'>点击</button>
</div>
`,
data:function(){
return{
arr:""
}
},
methods:{
fun:function(){
// this.$emit('事件',参数)
this.$emit('fu',this.arr)
}
}
})
new Vue({
el:""
})
</script>
