组件的作用：
将一些共用的结构封装为单独的模块，这种模块就可以认为是组件。
组件的分类：
全局组件：在vm实例创建的
局部组件：单文件组件中创建
创建全局组件：
Vue.component(组件名称，{})
组件是可复用的Vue实例，所以和new Vue接收相同的选项，例如：data，computed，watch，methods以及生命周期钩子等。
<body>
<div id="app">
<myfirst></myfirst>
</div>
<!-- 创建first所对应的模板 -->
<template id='firstTemp'>
<div>
<div class="red">这是我的第一个组件：{{myname}}</div>
<input type="text"> <br>
<button @click='sayhi'>点我啊</button>
</div>
</template>
<script>
// 创建第一个全局组件
// Vue.component(组件名称，配置对象)
Vue.component('myfirst', {
// template:'模板结构'
template: '#firstTemp',
// 定义数据
data(){
return {
myname:'哈哈'
}
},
methods:{
sayhi(){
alert('你好啊')
}
},
mounted(){
alert('你好啊,很happy')
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
父子组件的创建
嵌套组件，父子只是一个结构关系。
创建父子组件：局部组件
Vue.component('father',{
template:'',
data(){
return {}
},
components:{
子组件名称：{
之前写什么现在也写什么
}
。。。
}
})
//例子：
Vue.component('father',{
template:'',
data(){
return {}
},
components: {
'son': {
template: '#son',
data() {
return {
sname:'小明'
}
}
}
}
})
子组件在父组件模板中使用：
<template id='father'>
<div class="father">
<p>我是父组件{{fname}}</p>
<son></son>
</div>
</template>
组件间传值：
父传子：
<body>
<div id="app">
<father>
</father>
</div>
<template id='father'>
<div class="father">
<p>我是父组件{{fname}}</p>
<p>我要告诉我儿子其实他是{{type}}</p>
<son :mytype="type"></son>
</div>
</template>
<template id='son'>
<div class="son">
<p>我是子组件{{sname}}</p>
<p>我的老爸告诉我我其实是{{mytype}}</p>
</div>
</template>
<script>
// 创建父组件
Vue.component('father', {
template: '#father',
data() {
return {
fname: '老爸',
type: '穷二代'
}
},
// 通过components来创建子组件,可以创建多个
components: {
'son': {
template: '#son',
props: ['mytype'],
data() {
return {
sname: '小明',
// mytype:'??'
}
}
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
子传父：
<body>
<div id="app">
<father>
</father>
</div>
<template id='father'>
<div class="father" style='border:solid 1px'>
<p>我是父组件{{fname}}</p>
<p>我的儿子告诉我他的女朋友的名字叫{{erxifu}}</p>
<!-- <son v-on:getname='ok'></son> -->
<son @getname='ok'></son>
</div>
</template>
<template id='son'>
<div class="son">
<p>我是子组件{{sname}}</p>
<button @click='tellname'>点击告诉我老爸我的女朋友叫{{mygfname}}</button>
</div>
</template>
<script>
// 创建父组件
Vue.component('father', {
template: '#father',
data() {
return {
fname: '老爸',
erxifu: '??'
}
},
methods: {
// 这个事件处理函数默认有一个参数,这个参数就是之前事件传递的数据
ok(data) {
console.log(data)
this.erxifu = data
}
},
// 通过components来创建子组件,可以创建多个
components: {
'son': {
template: '#son',
data() {
return {
sname: '小明',
mygfname: '小红'
}
},
methods: {
tellname() {
// 发射一个事件
// this.$emit(事件名称,你想传递的数据)
// 数据可以是任意数据
this.$emit('getname', this.mygfname)
}
}
}
}
})
var vm = new Vue({
el: '#app',
data: {
},
mounted() {
}
})
</script>
</body>
兄弟组件间传值：
<body>
<div id="app">
<father>
</father>
</div>
<template id='father'>
<div class="father" style='border:solid 1px'>
<p>我是父组件{{fname}}</p>
<son></son>
<dauther></dauther>
</div>
</template>
<template id='son'>
<div class="son">
<p>我是儿子组件{{sname}}</p>
<p>我的妹妹回来了,跟我说她的男朋友叫:{{meifu}}</p>
</div>
</template>
<template id='dauther'>
<div class="dauther">
<p>我是女儿组件{{dname}}</p>
<button @click='tellname'>点击向我哥哥炫耀我的男朋友的名字叫{{mybfname}}</button>
</div>
</template>
<script>
// 创建一个事件总线
var bus = new Vue()
// 创建父组件
Vue.component('father', {
template: '#father',
data() {
return {
fname: '老爸'
}
},
// 通过components来创建子组件,可以创建多个
components: {
'son': {
template: '#son',
data() {
return {
sname: '小明',
meifu:'??'
}
},
// 在mounTed钩子函数中进行事件的监听
mounted(){
// 通过事件总线的$on进行事件的监听
// 事件处理函数默认有一个参数,就是传递的数据
bus.$on('getname',(data) => {
console.log(data)
this.meifu = data
})
}
},
'dauther': {
template: '#dauther',
data() {
return {
dname: '小红',
mybfname:'狗蛋'
}
},
methods:{
// 通过事件总线发射一个事件
tellname(){
bus.$emit('getname',this.mybfname)
}
}
}
}
})
var vm = new Vue({
el: '#app',
data: {
},
mounted() {
}
})
</script>
</body>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
