vue 之prop与$emit的用法

1、vue组件Prop传递数据：

 组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引父组件的数据，如果要让子组件使用父组件的数据，则需要通过子组件的prop选项；prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行；这样主要是防止子组件无意修改父组件的状态；每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg )：发送数据，第一个参数是发送数据的名称，接收时还用这个参数接收，第二个参数是这个数据现在的位置

拓展：

vm.$on( event, fn )：接收数据，第一个参数是数据的名称，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

注：vue模板只能有一个根对象 (在template中只能用一个标签来包裹全部元素)不然回报错如：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

父组件：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
     
     
     <div>父组件的addName：{{addrName}}
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <child-prop @showAddrName="updateAddrName" :sendData="addrName">
     
     </child-prop>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <script>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     import childProp 
     
     from 
     
     "./childProp";
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     name:
     
     'index',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     components: {childProp},
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         data () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     addrName:
     
     "北京"
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     methods:{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           updateAddrName(data){
     
     //触发子组件城市选择-选择城市的事件
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     console.log(data);
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     this.addrName = data.addrName;
     
     //改变了父组件的值
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     console.log(
     
     'toCity:'+
     
     this.addrName)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </script>
    
    
   
   
 
 

子组件：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <h3>父组件传给子组件的addrName:{{sendData}}
     
     </h3>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <br/>
     
     <button @click='addr(`上海`)'>点击此处将‘上海’发射给父组件
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <script>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     name:
     
     'childProp',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     props:[
     
     "sendData"], 
     
     // 用来接收父组件传给子组件的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         methods:{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           addr(val) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     let data = {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     addrName: val
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             };
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     this.$emit(
     
     'showAddrName',data);
     
     //select事件触发后，自动触发showCityName事件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </script>