Vue组件之间传值

父组件向子组件传值

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。

  • 然后子组件用属性props接收

  • 在props中使用驼峰形式,模板中需要使用短横线的形式,字符串形式的模板中没有这个限制

  <div id="app">
   <div>{{pmsg}}</div>
    <!--1、menu-item 在 APP中嵌套着 故 menu-item   为 子组件     -->
    <!-- 给子组件传入一个静态的值 -->
   <menu-item title='来自父组件的值'></menu-item>
   <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle 来自父组件data 中的数据 .
 传的值可以是数字、对象、数组等等
-->
   <menu-item :title='ptitle' content='hello'></menu-item>
 </div>

 <script type="text/javascript">
   Vue.component('menu-item', {
     // 3、 子组件用属性props接收父组件传递过来的数据  
     props: ['title', 'content'],
     data: function() {
       return {
         msg: '子组件本身的数据'
      }
    },
     template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
  });
   var vm = new Vue({
     el: '#app',
     data: {
       pmsg: '父组件中内容',
       ptitle: '动态绑定属性'
    }
  });
 </script>

 

 

子组件向父组件传值

  • 子组件用$emit()触发事件

  • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据

  • 父组件用v-on 监听子组件的事件


<div id="app">
   <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <!-- 2 父组件用v-on 监听子组件的事件
这里 enlarge-text 是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数
-->
   <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
   /*
    子组件向父组件传值-携带参数
  */
   
   Vue.component('menu-item', {
     props: ['parr'],
     template: `
       <div>
         <ul>
           <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
         </ul>
### 1、子组件用$emit()触发事件
### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
         <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
         <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
       </div>
     `
  });
   var vm = new Vue({
     el: '#app',
     data: {
       pmsg: '父组件中内容',
       parr: ['apple','orange','banana'],
       fontSize: 10
    },
     methods: {
       handle: function(val){
         // 扩大字体大小
         this.fontSize += val;
      }
    }
  });
 </script>

兄弟之间的传递

 

 

  • 兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据

    • 提供事件中心 var hub = new Vue()

  • 传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)

  • 接收数据方,通过mounted(){} 钩子中 触发hub.$on(方法名,函数体)

    • 销毁事件 通过hub.$off(方法名)销毁之后无法进行传递数据

 <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">
   /*
    兄弟组件之间数据传递
  */
   //1、 提供事件中心
   var hub = new Vue();

   Vue.component('test-tom', {
     data: function(){
       return {
         num: 0
      }
    },
     template: `
       <div>
         <div>TOM:{{num}}</div>
         <div>
           <button @click='handle'>点击</button>
         </div>
       </div>
     `,
     methods: {
       handle: function(){
         //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
         hub.$emit('jerry-event', 2);
      }
    },
     mounted: function() {
      // 3、接收数据方,通过mounted(){} 钩子中 触发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'>点击</button>
         </div>
       </div>
     `,
     methods: {
       handle: function(){
         //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
         hub.$emit('tom-event', 1);
      }
    },
     mounted: function() {
       // 3、接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
       hub.$on('jerry-event', (val) => {
         this.num += val;
      });
    }
  });
   var vm = new Vue({
     el: '#app',
     data: {
       
    },
     methods: {
       handle: function(){
         //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
         hub.$off('tom-event');
         hub.$off('jerry-event');
      }
    }
  });
 </script>

 

posted @ 2020-12-03 00:06  星辰ꦿ.大海  阅读(159)  评论(0编辑  收藏  举报