Vue常用API

1. 数据相关API

   • Vue.set

     • 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

     • 使用方法： Vue.set(target, propertyName/index, value)

       <div id="app">
           <p v-for="(item, index) in items" :key="index">{{item}}</p>
           <button @click='clickBtn'>点击</button>
       </div>
       <script>
           const app = new Vue({
               el:'#app',
               data() {
                   return {
                       items:['HTML','JS','CSS'],
                       message:'列表',
                   }
               },
               methods: {
                   clickBtn(){
                       //this.items[1] = 'new';//['HTML','JS','CSS']---值更新了，视图没有更新
                       this.$set(this.items,1,'update')
                       Vue.set(this.items,3,'new')
                   }
               },
           })
       </script>
       

   • Vue.delete：

     • 删除对象的属性。如果对象是响应式的，确保删除能触发更新视图

     • 使用方法： Vue.delete(target, propertyName/index)

       <div id="app">
           <p v-for="(item, index) in items" :key="index">{{item}}</p>
           <button @click='clickBtn'>点击</button>
       </div>
       <script>
           const app = new Vue({
               el:'#app',
               data() {
                   return {
                       items:['HTML','JS','CSS'],
                       message:'列表',
                   }
               },
               methods: {
                   clickBtn(){
                       //delete this.items[0];//['JS','CSS']---值更新了，视图没有更新
                        this.$delete(this.items,0,)
                        Vue.delete(this.items,1)
                   }
               },
           })
       </script>
       

2. 事件相关API

   • vm.$on

     • 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的 额外参数

     • 使用方法：vm.$on('test', function (msg) {console.log(msg)})

     • 常用：父子组件传值

       <div id="app">
           <p>{{message}}</p>
           <child-com @show-message='handleClick'></child-com>
       </div>
       <script>
           Vue.component('child-com', {
               template:`
                   <div>
                       <button @click='sendMsg'>发送消息</button>
                   </div>
               `,
               methods: {
                   sendMsg(){
                       this.$emit('show-message', 'message form child')
                   }
               },
           })
           const app = new Vue({
               el:'#app',
               data() {
                   return {
                       message:'列表',
                   }
               },
               methods:{
                   handleClick(message){
                       this.message = message
                   }
               }
           })
       </script>
       

   • vm.$emit:

     • 触发当前实例上的事件。附加参数都会传给监听器回调
     • 使用方法：vm.$emit('test', 'hi')
     • 典型应用：事件总线（通过在Vue原型上添加一个Vue实例作为事件总线，实现组件间相互通信，而且不受组件间关系的影响）

   • vm.$once

     • 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除
     • 使用方法：vm.$once('test', function (msg) {console.log(msg)})

   • vm.$off（移除自定义事件监听器）

     • 如果没有提供参数，则移除所有的事件监听器；vm.$off()
     • 如果只提供了事件，则移除该事件所有的监听器；vm.$off('test')
     • 如果同时提供了事件与回调，则只移除这个回调的监听器；vm.$off('test', callback)

3. 组件或元素引用

   • ref 被用来给元素或子组件注册引用信息；引用信息将会注册在父组件的 $refs 对象上

   • 如果在普通 的 DOM 元素上使用，引用指向的就是 DOM 元素

   • 如果用在子组件上，引用就指向组件实例

     <div id="app">
         <p ref="domp">{{message}}</p>
         <child-com @show-message='handleClick' ref="child"></child-com>
     </div>
     <script>
         Vue.component('child-com', {
             template:`
                 <div>
                     <button @click='sendMsg'>发送消息</button>
                 </div>
             `,
             methods: {
                 sendMsg(){
                     this.$emit('show-message', 'message form child')
                 }
             },
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     message:'列表',
                 }
             },
             methods:{
                 handleClick(message){
                     this.message = message
                     console.log(this.$refs.domp);//p元素
                     console.log(this.$refs.child);//child-com组件vue实例
                 }
             }
         })
     </script>
     

   • 注意：

     • ref 是作为渲染结果被创建的，在初始渲染时不能访问它们

     • $refs 不是响应式的，不要试图用它在模板中做数据绑定

     • 当 v-for 用于元素或组件时，引用信息将是包含 DOM 节点或组件实例的数组

       <div id="app">
           <p v-for="(item, index) in items" :key="index" ref="p" @click='showMessage'>{{item}}</p>
       </div>
       <script>
           const app = new Vue({
               el:'#app',
               data() {
                   return {
                       items:['HTML','JS','CSS'],
                   }
               },
               methods: {
                   showMessage(){
                       console.log(this.$refs.p);//(3) [p, p, p]
                   }
               },
           })
       </script>