vue-动态参数(2.6.0版本新增)

可以用方括号[]括起来的JavaScript表达式作为一个指令或者事件名来作为参数

<template>
    <div>
        <input @[eventName]="event" />
        <button @click="eventName='change'">change</button>
        <button @click="eventName='focus'">focus</button>
        <button @click="eventName=1">1</button>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                eventName: ''
            }
        },
        methods: {
            event() {
                console.log('触发' + this.eventName + '事件')
            }
        }
    }
</script>

执行后的结果

image.png

这里动态参数预期会求出一个字符串，异常情况下的值为null，将会被现行的用于移除绑定。任何其他非字符串类型的值都会抛出一个警告（如图）

<template>
    <div>
        <input @[type?change:focus]="event" />
        <button @click="type=true">change</button>
        <button @click="type=false">focus</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                type: null,
                change: 'change',
                focus: 'focus'
            }
        },
        methods: {
            event() {
                console.log('触发' + (this.type ? 'change' : 'focus') + '事件')
            }
        }
    }
</script>

同时动态参数也支持表达式的形式，但是如果使用另一种方式将会报错

image.png image.png

这里是因为动态表达式有一些约束，因为某些字符放在HTML特性名里是无效的

image.png

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。