vue.js $refs和$emit 父子组件交互的方法

ca88,vue使用$emit时,父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

本文介绍了vue.js $refs和$emit
父子组件交互的方法,分享给大家,废话不多说直接看代码:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </div>
 <script>
  Vue.component('button-counter', {
   template: '<button v-on:click="increment">{{ counter }}</button>',
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit('ee', this.counter);//有效
     this.$emit('eEvent', this.counter);//无效,不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: '#counter-event-example',
   data: {
    total: '点击下面的按钮'
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>
<strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template>
 <div id="app">
  <input type="button" name="" id="" @click="parentCall" value="父调子" />
  <hello ref="chil" />//hello组件
 </div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
    parentCall () {
      this.$refs.chil.chilFn('我是父元素传过来的')
    }
  }
 }
</script>
/*Hello.vue :*/
<template>
 <div class="hello"></div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
    chilFn (msg) {
      alert(msg)
    }
  }
 }
</script>


<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
//ps:App.vue 父组件
//Hello.vue 子组件
<!--App.vue :-->
<template>
  <div id="app">
    <hello @newNodeEvent="parentLisen" />
  </div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue 是子组件传过来的值
    alert(evtValue)
   }
  }
 }
</script>
<!--Hello.vue :-->
<template>
  <div class="hello">
    <input type="button" name="" id="" @click="chilCall()" value="子调父" /> 
  </div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
   chilCall(pars) {
    this.$emit('newNodeEvent', '我是子元素传过来的')
   }
  }
 }
</script> 

发表评论

电子邮件地址不会被公开。 必填项已用*标注