vue2总结一些小功能
一 、keep-alive
实现router切换状态保留 如果加载的数据ok 就不用重复加载了。代码示例
| 123456789101112131415 | <template> <div class="tab"> <router-link class="tab-item" to="/goods" tag="li" active-class="active"> <a href="javascript:;">商品</a> </router-link> </div> <div> <!--实现router切换状态保留 果加载的数据ok 就不用重复加载了--> <keep-alive> <!--:seller="seller" 向子组件传递数据--> <router-view :seller="seller"></router-view> </keep-alive> </div> </div></template> |
二 、ref 引用指向 DOM节点
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
| 12345 | <div id="parent"> <user-profile ref="profile"></user-profile></div>// 访组件实例this.$refs.profile |
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，应当避免在模板或计算属性中使用 $refs。
三、Vue.nextTick( [callback, context] )
异步更新队列、为了在数据变化之后等待 Vue 完成更新 DOM可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用
| 1234567891011121314151617 | Vue.component("example", { template: "<span>{{ message }}</span>", data: function () { return { message: "没有更新" } }, methods: { updateMessage: function () { this.message = "更新完成" console.log(this.$el.textContent) // => "没有更新" this.$nextTick(function () { console.log(this.$el.textContent) // => "更新完成" }) } }}) |
四 、set 全局操作
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
| 12345678910 | var vm = new Vue({ data: { userProfile: { name: "Anika" } }})//你可以添加一个新的 age 属性到嵌套的 userProfile 对象或者更改：Vue.set(vm.userProfile, "age", 27);Vue.set(vm.userProfile, "name", "tom"); |
有时你可能需要为已有对象赋予多个新属性，在这种情况下，应该用两个对象的属性创建一个新的对象
| 1234 | this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: "Vue Green"}) |
五 、Vue.filter( id, [definition] )自定义过滤器
注册或获取全局过滤器。
| 123456789 | // 注册Vue.filter("my-filter", function (value) { // 返回处理后的值 return ；})// getter，返回已注册的过滤器var myFilter = Vue.filter("my-filter")}) |
六 、Vue.directive( id, [definition] )自定义属性指令
详细用法 https://cn.vuejs.org/v2/guide/custom-directive.html
| 12345678910111213141516 | // 注册Vue.directive("my-directive", { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {}})// 注册 (指令函数)Vue.directive("my-directive", function () { // 这里将会被 `bind` 和 `update` 调用})// getter，返回已注册的指令var myDirective = Vue.directive("my-directive") |
七 、 自定义插件 Vue.use( plugin )
| 12345678910 | import StarComponent from "./star.vue"const Star_ing = { install: function(Vue) { Vue.component("Star_", StarComponent) }}export default Star_ingVue.use(Star)//使用插件//调用插件<Star_></Star_> |
八 、使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。详细地址：https://cn.vuejs.org/v2/guide/components.html#Prop
| 12345678910 | //父组件<router-view :seller="seller"></router-view>//子组件 export default { props: { seller: { type: Object } } } |
九 、$emit 触发事件
- $emit是触发当前实例上的事件。附加参数都会传给监听器回调。
- 详细地址https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件
- 非父子组件的通信 https://cn.vuejs.org/v2/guide/components.html#非父子组件的通信
1234567891011121314151617 //子组件export default{ methods:{ click:function(){ // 子组件通过 $emit触发父组件的add方法 this.$emit("add", event.target); } }}//父组件<cartcontrol @add="addFood" :food="food"></cartcontrol>export default{ addFood(target) { this._drop(target); },}
阅读更多使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇：没有了
