据说vue最伟大的功能就是组件啦～
我就是把官网的demo自己小练习一下，然后跟着imooc学习学习，做个笔记
开始吧！～
1.1全局组件
要注册一个全局组件，你可以使用Vue.component(tagName, options)。
Vue.component('my-header',
{template:'<p>this is my header</p>'
'})
new Vue({
el: '#app',
components:{
'my-header':myHeader
}
})
1.2局部组件
首先在根组件注册
new Vue({
el: '#app',
components:{
'my-header':myHeader
}
})
在前面写
var myHeaderChild={
template:'<p>i am header child</p>'
}
var myHeader={
template:'<p><my-header-child></my-header-child></p>',
components:{
'my-header-child'myHeaderChild
}
}
注意⚠️避免组件data里直接赋值，引用赋值会影响其他组件
data里必须是函数，直接{{}}没用，看实例⬇️⬇️
根据官网的demo写个增加删除的按钮们吧～
首先注册组件
new Vue({
el: '#app',
components:{
increase,
decrease
}
})
两个子组件，data用函数
var increase={
template:<button @click="count++">{{count}}</button>
'{{count}}',
data(){return {count:0}}}
var decrease={
template:<button @click="count--">{{count}}</button>
'{{count}}',
data(){return {count:0}}}
敲可爱@～@
昨天写的，今天又忘了，于是乎，给自己写了一个header，加油～
在main.js中
注意⚠️在这个template不能删了啊，要不就不会显示啦！
啦啦啦～～～我的专属header就完成啦！
下面就是重头戏啊！组件的通信：props，emit，slot
官网的图👇
2.1 父给子传递：props
1⃣️静态props
最简单的props
Vue.component('child',{
props:['message'],
template:'<p>hello {{ message }}</p>'})
<child message="world"></child>
但其实，官网的demo就是最好的例子
app.vue是根组件，里面componnets文件里有个hello.vue
它们之间就可以通信
我们在app.vue里的<hello myword='hello world from parent'></hello>给子组件赋值
然后在hello.vue里先在export default{props:[myword]}里声明一下父组件的值，再在子组件template里{{myword}}这样就可以啦～
2⃣️动态props
父组件
<input v-model="myVal">
<hello :my-value="myVal">
记得在data里声明
data(){
return {
myVal: ' '
}}
子组件
<template>
<p>{{myValuve}}</p>
</template>
2.2 子给父传递
使用$on(eventName)监听事件
使用$emit(eventName)触发事件
举个🌰
在子组件模版中定义一个button 添加一个click事件
<button @click="emitMyEvent">emit</button>
在子组件方法指令中添加一个新方法
emitMyEvent(){
this.$emit('my-event',this.msg)
}
在父组件方法指令中定义新方法
getMyEvent(msg){
console.log('i got my event'+msg)
}
在父组件模版中
<hello @my-event="getMyEvent"></hello >
再举个🌰
我们实现两个button求和的例子，一正一负。
子组件：
<template>
<button @click="calculate" >{{count}}</button>
</template>
data(){
return {
count:0
}},
methods:{
calculate(){
this.count++,
this.$emit("calculate")//传递事件给父组件
}}
父组件引入2个子组件
<template>
<hello v-on:calculate="calcutotal"></hello>
<hello v-on:calculate="subcalcutotal"></hello>
</template>
data(){
return{
total:0
}}
methods:{
calcutotal(){
this.total++},
subcalcutotal(){
this.total--}}
可爱多vue@～@
3 slot插槽
如果我想在父组件中，给子组件添加内容要怎么呢？slot插槽来帮你！
define：混合父组件的内容与子组件自己的模板，这个过程被称为内容分发
还是刚才的🌰
如果我要给按钮前面加上标签要怎么办呢？
直接在子标签中间加入我们要加的东西
如果没有加入内容，会显示no slot
具名slot
我们可以给slot name 然后指定的去使用
第二个slot不具名，所以就显示no slot啊～
4. 动态组件
如果我有多个组件，想随时切换怎么办呢？is大法来帮你！
在父组件中声明,就可以随心切换啦～！
<p :is="current"></p>
data(){
return{
current:'Hello'
}}
keep-alive 可以缓存，避免重新渲染，加快速度
总结一下：
网友评论