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
footer
<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>
