zoukankan      html  css  js  c++  java
  • vue中 关于$emit的用法

    1、父组件可以使用 props 把数据传给子组件。
    2、子组件可以使用 $emit 触发父组件的自定义事件。

    vm.$emit( event, arg ) //触发当前实例上的事件

    vm.$on( event, fn );//监听event事件后运行

    fn;

    例如:子组件:

    <template>  
      <div class="train-city">  
        <span @click='select(`大连`)'>大连</span>  
      </div>  
    </template>  
    <script>  
    export default {  
      name:'trainCity',  
      methods:{  
        select(val) {  
          let data = {  
            cityname: val  
          };  
          this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件  
        }  
      }  
    }  
    </script>  

    父组件:

    <template>  
        <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。  
    <template>  
    <script>  
    export default {  
      name:'index',  
      data () {  
       return {  
          toCity:"北京"  
        }  
      }  
      methods:{  
        updateCity(data){//触发子组件城市选择-选择城市的事件    
          this.toCity = data.cityname;//改变了父组件的值  
          console.log('toCity:'+this.toCity)        
        }  
      }  
    }  
    </script>  
  • 相关阅读:
    SQL学习指南第三篇
    SQL学习指南第二篇
    Rebuilding Roads
    TOJ4244: Sum
    K-th Number
    【模板】后缀数组
    冰水挑战
    旅途
    Monkey and Banana
    Max Sum Plus Plus
  • 原文地址:https://www.cnblogs.com/mophy/p/8630953.html
Copyright © 2011-2022 走看看