Vue基础（六）--组件及组件间的通讯

2019-10-29 本文已影响0人程序员大佬超

1.什么是组件

扩展HTML元素，封装可重用的代码。
组件是自定义元素（对象）。

2.定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">定义组件的两种方式</h1>
        </header>
        <div class="mui-content" id="content">
            <yxc></yxc>
            <hello></hello>
        </div>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            /**
             * 方式1：先创建组件构造器，然后由组件构造器创建组件
             */
            //1.使用Vue.extend创建一个组件构造器
            var MyComponent=Vue.extend({
                template:'<h3>hello world</h3>'
            })
            //2.使用Vue.component('标签名',组件构造器)，根据组件构造器来创建组件
            Vue.component('yxc',MyComponent);
            
            
            /**
             * 方式2：直接创建组件(推荐)
             */
            Vue.component('hello',{
                template:'<h3>hello component!</h3>'
            })
            var vm=new Vue({//这里的vm也是一个组件,称为根组件Root
                el:"#content",
                data:{
                    
                }
            })
        </script>
    </body>

</html>

3.组件的分类

全局组件
局部组件

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">定义组件的两种方式</h1>
        </header>
        <div class="mui-content" id="content">
            <hello></hello>
            <world></world>
        </div>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()

            /**
             * 全局组件，可以在所有Vue实例中调用
             */
            Vue.component('hello', {
                template: '<h3>{{name}}</h3>',
                data:function(){//在组件中存储数据时,必须以函数的形式,函数返回一个对象
                    return{
                        name:"hello，我是全局组件"
                    }
                }
            })
            /**
             * 局部组件，只能在当前Vue实例中调用
             */
            var vm = new Vue({
                el: "#content",
                data: {

                },
                components: {//局部组件
                    'world': {
                        template: '<h3>hello，我是{{msg}}</h3>',
                        data(){
                            return{
                                msg:"局部组件"
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

4.引用模板

将组建的内容放到模板<template>中并引用.

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">引用模板</h1>
        </header>
        <div class="mui-content" id="content">
            <my_temp></my_temp>
        </div>
        <!-- <template>必须有且只有一个根元素 -->
        <template id="test">
            <div>
                <h4>{{msg}}</h4>
                <ul>
                    <li v-for="item in arr">{{item}}</li>
                </ul>
            </div>
        </template>
        
        
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            /**
             * 局部组件，只能在当前Vue实例中调用
             */
            var vm = new Vue({
                el: "#content",
                data: {

                },
                components: {//局部组件
                    'my_temp': {
                        name:'tepmName',//指定组件的名称,默认为标签名,可以不展示
                        template: '#test',
                        data(){
                            return{
                                msg:"局部组件",
                                arr:['tom','jack','mike']
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

5. 动态组件

使用<component :is=''>组件，也就是多个组件使用同一个挂载点，然后动态的在它们之间切换。
用法：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">动态组件</h1>
        </header>
        <div class="mui-content" id="content">
            <button @click="flag='my_test1'">显示my_test1组件</button>
            <button @click="flag='my_test2'">显示my_test2组件</button>

            <div>
                <component :is='flag'></component>
            </div>
        </div>

        <!-- <template>必须有且只有一个根元素 -->
        <template id="test1">
            <div>
                <h4>{{msg}}</h4>
                <ul>
                    <li v-for="item in arr">{{item}}</li>
                </ul>
            </div>
        </template>


        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: "#content",
                data: {
                    flag: 'my_test1'
                },
                components: { //局部组件
                    'my_test1': {
                        name: 'tepmName', //指定组件的名称,默认为标签名,可以不展示
                        template: '#test1',
                        data() {
                            return {
                                msg: "我是test1组件",
                                arr: ['tom', 'jack', 'mike']
                            }
                        }
                    },
                    'my_test2': {
                        template: '<h4>我是test2组件{{y}}</h4>',
                        data() {
                            return {
                                y: Math.random()
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

6. keep-alive组件

用来缓存，避免重新渲染的。

示例：如下，如果不使用keep-alive，每次切换组件，那两个随机数都会重新生成，如果使用keep-alive组件，则可进行缓存，不重新创建。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">keep-alive</h1>
        </header>
        <div class="mui-content" id="content">
            <button @click="flag='my_test1'">显示my_test1组件</button>
            <button @click="flag='my_test2'">显示my_test2组件</button>

            <div>
                <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 -->
                <keep-alive>
                    <component :is='flag'></component>
                </keep-alive>
            </div>
        </div>

        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: "#content",
                data: {
                    flag: 'my_test1'
                },
                components: {
                    'my_test1': {
                        name: 'tepmName', //指定组件的名称,默认为标签名,可以不展示
                        template: '<h4>我是test1组件{{x}}</h4>',
                        data() {
                            return {
                                x: Math.random()
                            }
                        }
                    },
                    'my_test2': {
                        template: '<h4>我是test2组件{{y}}</h4>',
                        data() {
                            return {
                                y: Math.random()
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

7.组件间的数据传递

7.1 父子组件

在一个组件内部定义另一个组件，称为父子组件。子组件只能在父组件中使用。
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

7.2 组件间数据传递（通信）

(1)子组件访问父组件中的数据

a）在调用子组件时，绑定想要获取的父组件的数据
b）在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据。
注：组件中的数据共有三种形式，data、props、computed

示例：

<!doctype html>
<html>

  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <link href="../css/mui.min.css" rel="stylesheet" />
  </head>

  <body>
      <div class="mui-content" id="content">
          <my_hello></my_hello>
      </div>
      <!-- <template>必须有且只有一个根元素 -->
      <template id="hello">
          <div>
              <h4>我是hello父组件</h4>
              <h4>访问自己的数据：{{msg}}、{{name}}、{{age}}、{{user.id}}</h4>
              
              <hr>
              <my_world :message="msg" :age="age" :user="user"></my_world>
          </div>
      </template>
      
      <template id="world">
          <div>
              <h5>我是world子组件</h5>
              <h5>访问父组件中的数据：{{message}},{{age}}、{{user.username}}</h5>
          </div>
      </template>
      <script src="../js/vue.js"></script>
      <script src="../js/mui.min.js"></script>
      <script type="text/javascript">
          mui.init()
          var vm = new Vue({ //根组件
              el: "#content",
              components: {
                  'my_hello': { //父组件
                      template: "#hello",
                      data() {
                          return {
                              msg: 'hello',
                              name: 'jack',
                              age: 23,
                              user: {
                                  id: 2014311951,
                                  username: 'yxc'
                              }
                          }
                      },
                      components: {
                          'my_world': { //子组件
                              template: '#world',
                              props:['message','age','user']//接收父组件传过来的数据
                          }
                      }
                  }
              }
          })
      </script>
  </body>

</html>

props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default: any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 + prop 没有被传入的，则一个控制台警告将会被抛出。
validator: Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
示例：

// 简单语法

Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div class="mui-content" id="content">
            <my_hello></my_hello>
        </div>
        <!-- <template>必须有且只有一个根元素 -->
        <template id="hello">
            <div>
                <h4>我是hello父组件</h4>
                <h4>访问自己的数据：{{msg}}、{{name}}、{{age}}、{{user.id}}</h4>

                <hr>
                <my_world :message="msg" :age="age" :name="name" :user="user"></my_world>
            </div>
        </template>

        <template id="world">
            <div>
                <h5>我是world子组件</h5>
                <h5>访问父组件中的数据：{{message}},{{age}},{{name}},{{user.username}}</h5>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({ //根组件
                el: "#content",
                components: {
                    'my_hello': { //父组件
                        template: "#hello",
                        data() {
                            return {
                                msg: 'hello',
                                name: 'jack',
                                age: 23,
                                user: {
                                    id: 2014311951,
                                    username: 'yxc'
                                }
                            }
                        },
                        components: {
                            'my_world': { //子组件
                                template: '#world',
                                // props:['message','age','user']//接收父组件传过来的数据
                                props: { //也可以是对象,允许配置高级设置,如类型判断,数据校验,设置默认值
                                    message: String,
                                    age: {
                                        type: Number,
                                        default: 18,
                                        validator: function(value) {
                                            return value >= 0;
                                        }
                                    },
                                    name: {
                                        type: String,
                                        required: true,
                                    },
                                    user: {
                                        type: Object,
                                        default: function(){//对象或数组的默认值必须使用函数的属性来返回
                                            return {id: 2014311950,username: 'jack'};
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

总结：父组件通过props向下传递数据给子组件

（2）父组件访问子组件中的数据

a）在子组件中使用vm.$emit(事件名,数据)出发一个自定义事件，事件名自定义
b）父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div class="mui-content" id="content">
            <my_hello></my_hello>
        </div>
        <!-- <template>必须有且只有一个根元素 -->
        <template id="hello">
            <div>
                <h4>我是hello父组件</h4>
                <h4>访问自己的数据：{{msg}}、{{name}}、{{age}}、{{user.id}}</h4>
                <h4>访问子组件中的数据：{{h_sex}}，{{h_height}}</h4>
                <hr>
                <my_world :message="msg" :age="age" :name="name" :user="user" @e-world="getData"></my_world>
            </div>
        </template>

        <template id="world">
            <div>
                <h5>我是world子组件</h5>
                <h5>访问父组件中的数据：{{message}},{{age}},{{name}},{{user.username}}</h5>

                <button @click="sendData()">将子组件中的数据向上发送到父组件</button>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({ //根组件
                el: "#content",
                components: {
                    'my_hello': { //父组件
                        template: "#hello",
                        methods: {
                            getData(sex, height) {
                                console.log(sex);
                                console.log(height);
                                this.h_sex = sex;
                                this.h_height = height;
                            }
                        },
                        data() {
                            return {
                                msg: 'hello',
                                name: 'jack',
                                age: 23,
                                user: {
                                    id: 2014311951,
                                    username: 'yxc'
                                },
                                h_sex: '',
                                h_height: ''
                            }
                        },
                        components: {
                            'my_world': { //子组件
                                data() {
                                    return {
                                        sex: 'male',
                                        height: 100
                                    }
                                },
                                template: '#world',
                                // props:['message','age','user']//接收父组件传过来的数据
                                props: { //也可以是对象,允许配置高级设置,如类型判断,数据校验,设置默认值
                                    message: String,
                                    age: {
                                        type: Number,
                                        default: 18,
                                        validator: function(value) {
                                            return value >= 0;
                                        }
                                    },
                                    name: {
                                        type: String,
                                        required: true,
                                    },
                                    user: {
                                        type: Object,
                                        default: function() { //对象或数组的默认值必须使用函数的属性来返回
                                            return {
                                                id: 2014311950,
                                                username: 'jack'
                                            };
                                        }
                                    }
                                },
                                methods: {
                                    sendData() {
                                        console.log(this); //这个this表示当前子组件实例
                                        this.$emit('e-world', this.sex, this.height); //触发一个自定义事件,发送数据
                                    }
                                }
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

8. 单向数据流

props是单向绑定的，当父组件的属性发生改变时，将传到给子组件，但是不会反过来。
且不允许子组件直接修改父组件中的数据，会报错。
示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="content">
            <h2>父组件：{{name}}</h2>
            <!-- 父组件数据改变时子组件中的数据也会变 -->
            <input v-model="name" />
            
            <my-hello :name="name"></my-hello>
        </div>
        
        <template id="hello">
            <div>
                <h3>子组件{{name}}</h3>
                <button @click="change">修改数据</button>
            </div>
        </template>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm=new Vue({//父组件
                el:"#content",
                data:{
                    name:"hello"
                },
                components:{
                    'my-hello':{//子组件
                        data(){
                            return{
                            }
                        },
                        template:"#hello",
                        props:['name'],
                        methods:{
                            change:function(){//不允许子组件直接修改父组件中的数据,会报错
                                this.name="change hello"
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

解决方式

方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据。
示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="content">
            <h2>父组件：{{name}}</h2>
            <!-- 父组件数据改变时子组件中的数据也会变 -->
            <input v-model="name" />
            
            <my-hello :name="name"></my-hello>
        </div>
        
        <template id="hello">
            <div>
                <h3>子组件{{userName}}</h3>
                <button @click="change">修改数据</button>
            </div>
        </template>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm=new Vue({//父组件
                el:"#content",
                data:{
                    name:"hello"
                },
                components:{
                    'my-hello':{//子组件
                        data(){
                            return{
                                userName:this.name//将父组件传过来的值赋到新变量userName中
                            }
                        },
                        template:"#hello",
                        props:['name'],
                        methods:{
                            change:function(){
                                // this.name="change hello"//不允许子组件直接修改父组件中的数据,会报错
                                this.userName="change hello"
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：

① 使用 .sync (1.0版本支持，2.0版本中不支持，2.3版本又开始支持)
需要显示的触发一个更新事件
示例：

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="../css/mui.min.css" rel="stylesheet" />
   </head>

   <body>
       <div id="content">
           <h2>父组件：{{name}}</h2>
           <input v-model="name" />
           
           <!-- 使用.sync -->
           <my-hello :name.sync="name"></my-hello>
       </div>
       
       <template id="hello">
           <div>
               <h3>子组件{{name}}</h3>
               <button @click="change">修改数据</button>
           </div>
       </template>
       <script src="../js/mui.min.js"></script>
       <script src="../js/vue.js"></script>
       <script type="text/javascript">
           mui.init()
           var vm=new Vue({//父组件
               el:"#content",
               data:{
                   name:"hello"
               },
               components:{
                   'my-hello':{//子组件
                       data(){
                           return{
                           }
                       },
                       template:"#hello",
                       props:['name'],
                       methods:{
                           change:function(){
                               this.$emit('update:name','change hello');//方式2:使用.sync 显示触发一个更新事件,父组件也会更新
                           }
                       }
                   }
               }
           })
       </script>
   </body>

</html>

② 可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性（因为对象是引用类型，指向同一个内存空间）,推荐使用。
示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="content">
            <h2>父组件：{{name}}</h2>
            <input v-model="name" />
            <h2>父组件：{{user.age}}</h2>

            <!-- 使用.sync -->
            <my-hello :name.sync="name" :user="user"></my-hello>
        </div>

        <template id="hello">
            <div>
                <h3>子组件{{name}}</h3>
                <h2>子组件：{{user.age}}</h2>
                <button @click="change">修改数据</button>
            </div>
        </template>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({ //父组件
                el: "#content",
                data: {
                    name: "hello",
                    user: { //包装成一个对象,子组件修改属性时将改变,因为指向的是同一个内存空间
                        name: "chaoyoung",
                        age: 23
                    }
                },
                components: {
                    'my-hello': { //子组件
                        data() {
                            return {}
                        },
                        template: "#hello",
                        props: ['name', 'user'],
                        methods: {
                            change: function() {
                                // this.$emit('update:name','change hello');//方式2:使用.sync 显示触发一个更新事件,父组件也会更新
                                this.user.age = 18;
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

9.非父子组件间的通讯

非父子组件间通讯，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件。
步骤：

1.创建空的Vue实例
var Event=new Vue();

2.触发事件
Event.$emit('事件名',数据);

3.监听事件
Event.$on('事件名',data=>{})

示例：

<!doctype html>
<html>

  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <link href="../css/mui.min.css" rel="stylesheet" />
  </head>

  <body>
      <div id="content">
          <my-a></my-a>
          <my-b></my-b>
          <my-c></my-c>
      </div>
      <template id="a">
          <div>
              <h3>A组件{{name}}</h3>
              <button @click="send">(A)将数据发送给C组件</button>
          </div>
      </template>
      <template id="b">
          <div>
              <h3>B组件{{age}}</h3>
              <button @click="send">(B)将数据发送给C组件</button>
          </div>
      </template>
      <template id="c">
          <div>
              <h3>C组件{{namec}},{{agec}}</h3>
          </div>
      </template>

      <script src="../js/vue.js"></script>
      <script src="../js/mui.min.js"></script>
      <script type="text/javascript">
          mui.init()

          //定义一个空的Vue实例
          var Event = new Vue();

          var A = {
              template: "#a",
              data() {
                  return {
                      name: 'yxc'
                  }
              },
              methods: {
                  send: function() {
                      //发送
                      Event.$emit('data-a', this.name);
                  }
              }
          }

          var B = {
              template: "#b",
              data() {
                  return {
                      age: 23
                  }
              },
              methods: {
                  send: function() {
                      //发送
                      Event.$emit('data-b', this.age);
                  }
              }
          }
          var C = {
              template: "#c",
              data() {
                  return {
                      namec: "",
                      agec: 0
                  }
              },
              mounted() { //在模板编译完成之后执行
                  //这里不能用普通函数function(name){},否则this是指全局实例Event,也就不能将值赋到C组件
                  // Event.$on('data-a',function(name){
                  //  console.log(name);
                  //  this.namec=name;
                  // })
                  
                  Event.$on('data-a', name => {//使用箭头函数
                      console.log(name);
                      this.namec = name;
                  })
                  Event.$on('data-b', age => {
                      console.log(age);
                      this.agec = age;
                  })
              }
          }

          var vm = new Vue({
              el: "#content",
              components: {
                  'my-a': A,
                  'my-b': B,
                  'my-c': C
              }
          })
      </script>
  </body>

</html>

10.slot内容分发

本意：位置，槽

示例：用来获取组件中的原内容，类似argular中的trasclude指令。

单一slot

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="content">
            <my-hello>这是原内容，则显示此原内容</my-hello>
            
            <my-hello></my-hello>
        </div>
        <template id="hello">
            <div>
                <h3>hello组件内容</h3>
                <!-- 如果要获取原内容，用内置组件slot -->
                <slot>如果没有原内容，则显示此内容</slot>
            </div>
        </template>
        
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm=new Vue({
                el:"#content",
                components:{
                    'my-hello':{
                        template:"#hello"
                    }
                }
            })
        </script>
    </body>

</html>

具名slot

就是给原内容加上slot标签，然后根据slot名称来展示。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="content">
            <!-- <my-hello>这是原内容，则显示此原内容</my-hello> -->
            <!-- <my-hello></my-hello> -->
            <my-hello>
                <ul slot="test1">
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
                <ol slot="test2">
                    <li>aaa</li>
                    <li>bbb</li>
                    <li>ccc</li>
                </ol>
            </my-hello>
        </div>
        <template id="hello">
            <div>
                <slot name="test1"></slot>
                <h3>hello组件内容</h3>
                <slot name="test2"></slot>
                <!-- 如果要获取原内容，用内置组件slot -->
                <!-- <slot>如果没有原内容，则显示此内容</slot> -->
            </div>
        </template>
        
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm=new Vue({
                el:"#content",
                components:{
                    'my-hello':{
                        template:"#hello"
                    }
                }
            })
        </script>
    </body>

</html>

原创不易，转载请注明出处：https://www.jianshu.com/p/b3a78d107047。