Vue常用API

Z时代
2024-01-10
分类：综合

vue

数据相关API

Vue.set

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

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

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

事件相关API
- vm.$on
  - 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数
  - 使用方法：vm.$on('test', function (msg) {console.log(msg)})
  - 常用：父子组件传值
```
<div >
    <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)

组件或元素引用

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

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

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

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

以上是 Vue常用API 的全部内容，来源链接： utcz.com/z/378769.html

Vue常用API

其他人也看了：