04vue2.0-Vue组件化-组件间的数据传递

作者: 东邪_黄药师 | 来源:发表于2020-12-07 12:28 被阅读0次

04vue2.0-Vue组件化-组件间的数据传递
Vue中组件间传值总结 ------ 2020-05-17
Vue组件间数据传递
vue组件间通信
组件化和React
Vue 组件数据传递
vue父子组件以及非父子组件的通信
弹窗设置(父子传参原理)
Vue2 组件通信写法总结
Vue常见问题

Vue组件之间传值

父组件向子组件传值

1.父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。
然后子组件用属性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 src="js/vue.js"></script>
        <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>

image.png
2.父组件向子组件传值-props命名规则

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

Vue.component(‘menu-item', {
// 在 JavaScript 中是驼峰式的
props: [‘menuTitle'],
template: '<div>{{ menuTitle }}</div>'
})
<!– 在html中是短横线方式的 -->
<menu-item menu-title=“nihao"></menu-item>

3.父组件向子组件传值-props属性值类型
props属性值类型
⚫ 字符串 String
⚫ 数值 Number
⚫ 布尔值 Boolean
⚫ 数组 Array
⚫ 对象 Object

<body>
  <div id="app">
    <div>{{pmsg}}</div>
    <menu-item :pstr='pstr' :pnum='12' pboo='true' :parr='parr' :pobj='pobj'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值-props属性值类型
    */
    
    Vue.component('menu-item', {
      props: ['pstr','pnum','pboo','parr','pobj'],
      template: `
        <div>
          <div>{{pstr}}</div>
          <div>{{typeof pnum}}</div>
          <div>{{typeof pboo}}</div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            <span>{{pobj.name}}</span>
            <span>{{pobj.age}}</span>
          </div>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        pstr: 'hello',
        parr: ['apple','orange','banana'],
        pobj: {
          name: 'lisi',
          age: 12
        }
      }
    });
  </script>
</body>

image.png

子组件向父组件传值

子组件用$emit()触发事件
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on 监听子组件的事件
props传递数据原则：单向数据流

1.子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text") '>扩大字体</button>

2. 父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>

3. 子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>

4. 父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

具体案例：

<body>
  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item @enlarge-text='handle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('menu-item', {
      template: `
        <div>
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        fontSize: 20
      },
      methods: {
        handle: function(){
          // 扩大字体大小
          this.fontSize += 5;
        }
      }
    });
  </script>
</body>

image.png
2.子组件向父组件传值-携带参数

<body>
  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('menu-item', {
      template: `
        <div>
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小+5px</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小+10px</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        fontSize: 30
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
  </script>
</body>

image.png

兄弟之间的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

image.png

 <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>

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
匿名插槽

<div id="app">
    <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
        # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
        # 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

image.png

具名插槽

具有名字的插槽
使用 <slot> 中的 "name" 属性绑定元素

<body>
  <div id="app">
<!--    <base-layout>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout> -->
   <base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>

image.png

作用域插槽用法

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致

<div id="app">
    <!-- 
        1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
        但样式希望不一样 这个时候我们需要使用作用域插槽 
        
    -->  
    <fruit-list :list='list'>
       <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
            slotProps在这里只是临时变量   
        --->    
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">
            {{slotProps.info.name}}              
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            ###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
            ###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
                    如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>

image.png

综合的案例：

http://zhangzanzz007.gitee.io/vue-carts/

04vue2.0-Vue组件化-组件间的数据传递
Vue组件之间传值父组件向子组件传值 1.父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。...
Vue中组件间传值总结 ------ 2020-05-17
父子组件间传递数据的方式 1、父组件向子组件传递数据 2、子组件向父组件传递数据 3、父子组件相互传递同一数据的两...
Vue组件间数据传递
前言总结vue组件间的数据传递路由传参父组件传递数据给子组件---props 子组件传递数据给父组件---$...
vue组件间通信
vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据： ...
组件化和React
组件化组件的封装视图数据变化逻辑（数据驱动视图变化）组件的复用 props传递数据复用 JSX的本质 ...
Vue 组件数据传递
Vue 组件数据传递父组件->子组件父组件到子组件的数据通过 props 传递在父组件注册子组件，传递数据到...
vue父子组件以及非父子组件的通信
1.父组件传递数据给子组件通过props传递数据 2.子组件传递数据给父组件通过$emit传递父组件数据子组...
弹窗设置(父子传参原理)
父组件: 1.父组件向子组件传递数据父组件绑定属性,给子组件传递数据子组件通过props接收父组件传递过来的数据子...
Vue2 组件通信写法总结
组件通讯包括：父子组件间的通信和兄弟组件间的通信。具体有以下几种情况。父组件传递数据给子组件父组件使用 Pro...
Vue常见问题
1. 父子组件间通信父组件传递数据给子组件（通过props属性来实现）子组件通过props来接收数据子组件与...