vue:element-ui汇总篇

最新推荐文章于 2022-12-07 14:13:56 发布

原创最新推荐文章于 2022-12-07 14:13:56 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui键盘事件失效

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

element-ui

28 篇文章

订阅专栏

本文介绍Vue.js中处理键盘事件的具体方法，解决@keyup.enter不生效的问题，并演示了父组件如何向子组件传递数据及触发子组件方法，同时展示了子组件向父组件传递值的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘事件失效

使用@keyup.enter=’func’不起作用
要改为@keyup.native=’func’

父组件向子组件传值

父组件

HTML区域

<el-input v-model="addressDetail" @keyup.native="fo"></el-input>
<km-map ref="child" :addressDetail="addressDetail"></km-map>

js区域

export default {
  data() {
    return {
    addressDetail:'',
    }}

子组件

<script>
export default {
  props: ["addressDetail"],
  }
</script>

父组件触发子组件的事件

<el-button @click="fo">切换</el-button>
<km-map ref="child" :addressDetail="addressDetail"> </km-map>

methods: {
    fo() {
      this.$refs.child.search()
    },
}

子组件

<el-col>
    <el-button id="position" @click="search" type="primary" class="hidden">定位</el-button>
</el-col>

子组件的事件方法

search() {
  alert('这是子组件的方法')
},

子组件向父组件传值

子组件

<template>
  <div>         
    <el-row>
      <el-input v-model="username"></el-input>
      <el-button @click="setUser">沙发</el-button>
    </el-row>
  </div>
</template>
<script>
export default {
   data() {
    return {
      username: "",
   },
   methods: {
    setUser() {
      this.$emit("transferUser", this.username);
    },
}

父组件

{{user}}-user
<km-map ref="child" :addressDetail="addressDetail" @transferUser="getuser"> </km-map>


export default {
  data() {
    return {
      user:'',
      }
    },
    methods:{
    getuser(msg) {
          this.user = msg;
        },
    }    
 }

重点:
触发事件的函数要放在父组件上,而传递方法的要放在子组件上,同理传递值市也是一样,父向子传值,子通过props接收