vue封装一个搜索组件，出现了问题

Question

组件代码：

<template>
    <el-input 
        v-model="val"
        :placeholder="tip" 
        size="small" 
        clearable 
        @keyup.enter.native="echo()">
    </el-input>
</template>

<script>
export default {
    props:["tip"],
    data () {
        return {
            val:""
        }
    },
    methods:{
        echo:function(){
            alert(val)
        }
    }
}
</script>

为什么每次按回车的时候总会提示：val is not defined？我不是已经定义val了吗

Answer 1

alert(this.val)

Answer 2

函数有独立的作用域，当你弹出val的时候，只会在函数作用域中去寻找有没有定义这个变量。

Answer 3

弹出有问题：alert(this.val)或者@keyup.enter.native="echo(val)"这种形式进行传递参数