父組件向子組件傳值

• 父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上叹卷。
• 然后子組件用屬性props接收
• 在props中使用駝峰形式撼港，模板中需要使用短橫線的形式字符串形式的模板中沒有這個(gè)限制

  <div id="app">
    <div>{{pmsg}}</div>
     <!--1、menu-item  在 APP中嵌套著 故 menu-item   為  子組件      -->
     <!-- 給子組件傳入一個(gè)靜態(tài)的值 -->
    <menu-item title='來自父組件的值'></menu-item>
    <!-- 2骤竹、 需要?jiǎng)討B(tài)的數(shù)據(jù)的時(shí)候 需要屬性綁定的形式設(shè)置 此時(shí) ptitle  來自父組件data 中的數(shù)據(jù) . 
          傳的值可以是數(shù)字帝牡、對(duì)象、數(shù)組等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3蒙揣、 子組件用屬性props接收父組件傳遞過來的數(shù)據(jù)  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子組件本身的數(shù)據(jù)'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內(nèi)容',
        ptitle: '動(dòng)態(tài)綁定屬性'
      }
    });
  </script>

子組件向父組件傳值

• 子組件用$emit()觸發(fā)事件
• $emit() 第一個(gè)參數(shù)為 自定義的事件名稱 第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù)
• 父組件用v-on 監(jiān)聽子組件的事件

 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父組件用v-on 監(jiān)聽子組件的事件
        這里 enlarge-text  是從 $emit 中的第一個(gè)參數(shù)對(duì)應(yīng)   handle 為對(duì)應(yīng)的事件處理函數(shù) 
    --> 
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子組件向父組件傳值-攜帶參數(shù)
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ###  1否灾、子組件用$emit()觸發(fā)事件
            ### 第一個(gè)參數(shù)為 自定義的事件名稱   第二個(gè)參數(shù)為需要傳遞的數(shù)據(jù)  
          <button @click='$emit("enlarge-text", 5)'>擴(kuò)大父組件中字體大小</button>
          <button @click='$emit("enlarge-text", 10)'>擴(kuò)大父組件中字體大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內(nèi)容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 擴(kuò)大字體大小
          this.fontSize += val;
        }
      }
    });
  </script>

兄弟之間的傳遞

• 兄弟之間傳遞數(shù)據(jù)需要借助于事件中心，通過事件中心傳遞數(shù)據(jù)
• 提供事件中心 var hub = new Vue()
• 傳遞數(shù)據(jù)方鸣奔，通過一個(gè)事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))
• 接收數(shù)據(jù)方惩阶，通過mounted(){} 鉤子中 觸發(fā)hub.$on()方法名
• 銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)

 <div id="app">
    <div>父組件</div>
    <div>
      <button @click='handle'>銷毀事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟組件之間數(shù)據(jù)傳遞
    */
    //1挎狸、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>點(diǎn)擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、傳遞數(shù)據(jù)方断楷，通過一個(gè)事件觸發(fā)hub.$emit(方法名锨匆，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收數(shù)據(jù)方，通過mounted(){} 鉤子中  觸發(fā)hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>點(diǎn)擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2恐锣、傳遞數(shù)據(jù)方茅主，通過一個(gè)事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3土榴、接收數(shù)據(jù)方诀姚，通過mounted(){} 鉤子中  觸發(fā)hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>