vue:element-ui汇总篇

键盘事件失效

• 使用@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接收