1. 生命周期
2. Props参数传递以及校验
<body>
<div id="root"><child content="temp"></child></div>
<!-- <div id="root"><child :content="temp"></child></div> -->
<script>
Vue.component("child", {
// 方式一:
// props: ['content']
// 方式二:
props: {
// 方式一:
// content:String
// 方式二:
// content:[String, Number]
// 方式三:
content:{
// 指定数据类型
type:String,
// 是否为必传参数
required: true,
// 默认值
default: 'default value'
// 数据校验器，传入的数据必须满足条件，否则会报警告
validator: function(value) {
return (value.length > 5)
}
}
},
template: '<div>{{content}}</div>'
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
3.子组件绑定原生事件
-
通过子组件传递出来事件
<script> Vue.component('child', { template: '<div @click="handleChildClick">Child</div>', methods: { handleChildClick: function() { this.$emit('click') } } }) var vm = new Vue({ el: '#app', methods: { handleClick:function() { alert('click') } } }) </script> -
子组件直接绑定原生事件
<script> Vue.component('child', { template: '<div>Child</div>' }) var vm = new Vue({ el: '#app', methods: { handleClick:function() { alert('click') } } }) </script>
4.非父子组件间的传值
Bus / 总线 / 发布者订阅模式 / 观察者模式
<body>
<div id="root">
<child content="dzm"></child>
<child content="xyq"></child>
</div>
<script>
// 给Vue绑定一个Bus属性，然后就会每个属性都带有Bus属性
Vue.prototype.bus = new Vue()
Vue.component('child', {
props: {
content: String
},
data: function(){
return {
tempContent: this.content
}
},
template: '<div @click="handleClick">{{tempContent}}</div>',
methods: {
handleClick: function() {
this.bus.$emit('change', this.tempContent)
}
},
mounted: function() {
var _this = this
this.bus.$on('change', function(msg){
_this.tempContent = msg
})
}
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
5.Vue中的插槽 Slot（子组件 template 显示标签以及换行写法）
-
最原始写法
<script> Vue.component('child', { props: ['content'], template: `<div> <p>hello</p> <div v-html="content" ></div> </div>` }) var vm = new Vue({ el: "#app" }) </script> -
slot写法
dzm
<script> Vue.component('child', { template: `<div> <p>hello</p> // <slot>可以带默认内容</slot> <slot></slot> </div>` }) var vm = new Vue({ el: "#app" }) </script> -
slot在子组件中存在多个的写法
header<script> Vue.component('child', { template: `<div> <slot name='header'></slot> <div class='content'>content</div> <slot name='footer'></slot> </div>` }) var vm = new Vue({ el: "#app" }) </script> -
slot作用域插槽
<div id="app"> <child> <template slot-scope="props"> <li>{{props.item}}</li> </template> </child> </div> <script> Vue.component('child', { data: function() { return { list: [1,2,3,4,5] } }, template: `<div> <ul> <slot v-for='(item, index) in list' :item=item></slot> </ul> </div>` }) var vm = new Vue({ el: "#app" }) </script>
6.Vue中动态组件 component 以及 v-once 指令
在点击按钮切换过程中，默认子组件切换是删除救的子组件在添加新的子组件， 如果子组件加上 v-once，那么子组件就会被缓存起来，每次切换则是从缓存中拿出再次使用，所以在遇到静态内容时尽量使用 v-once 修饰。
<body>
<div id="root">
<component :is="type"></component>
<!-- <child-one v-if="type === 'child-one'"></child-one> -->
<!-- <child-two v-if="type === 'child-two'"></child-two> -->
<button @click='handleBtnClick'>change</button>
</div>
<script>
Vue.component('child-one', {
template: '<div v-once>child-one</div>'
})
Vue.component('child-two', {
template: '<div v-once>child-two</div>'
})
var vm = new Vue({
el: "#root",
data:{
type: 'child-one'
},
methods: {
handleBtnClick: function() {
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
}
}
})
</script>
</body>
6.Vue中动画的封装
CSS版本:
<style type="text/css">
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
<body>
<div id="root">
<fade :show="show"><div>hello world</div></fade>
<fade :show="show"><h1>hello world</h1></fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
Vue.component('fade', {
props: ['show'],
template: `<transition>
<slot v-if='show'></slot>
</transition>`
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleBtnClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
JS版本:
只需要替换一下上面CSS版中的 标签的代码即可测试
<script>
Vue.component('fade', {
props: ['show'],
template: `<transition
@before-enter='handleBeforeEnter'
@enter='handleEnter'>
<slot v-if='show'></slot>
</transition>`,
methods: {
handleBeforeEnter: function(el) {
el.style.color = 'red'
},
handleEnter: function(el, done) {
setTimeout(() => {
el.style.color = 'green'
done()
}, 2000);
}
}
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleBtnClick: function() {
this.show = !this.show
}
}
})
</script>
