Vue：组件开发

组件化思想：标准，分治，重用，组合

 目录：组件注册 > 组件调试工具 > 组件间数据交互 > 组件插槽

组件注册

1、基础：定义全局组件 Vue.component('MyComponentName', { /* ... */ })

　　案例： 字符串模板  template

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <!-- 引入element样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!-- 
            将自定义组件放在这里边，相当于vue的子组件
            组件可以重复使用，每个组件之间的数据相互不影响。
        -->
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

</body>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入组件库,注意顺序，vue先引入 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" >
    //全局组件
    Vue.component('button-counter',{
        data:function(){
            return{
                count:0
            }
        },
        template:'<button @click="count++" >点击了{{count}}</button>',
        methods:{
            handle:function(){
                //在这里也可以定义方法
            }
        }
    });
    
    //vue的实例也是一个组件
    var vm = new Vue({
        el: '#app',
        data:{
            flag: false,
            submitFlag : false, 
            id: '',
            name: '',
            books:[]
        },
        methods:{
        },
    });
</script>
</html>
组件的基本使用

2、注意事项：

　　　　2-1、组件里边的 data必须是一个函数

        data:function(){
            return{
                count:0
            }
        },
　　　　2-2、组件模板内容必须是单个根元素 
 
　　　　可以这样：template:'<button @click="count++" >点击了{{count}}</button>'
　　　　不能这样：template:'<button @click="count++" >点击了{{count}}</button> <button>测试</button>',
　　　　可以这样：template:'<div> <button @click="count++" >点击了{{count}}</button> <button>测试</button> </div>',

　　　　3-3、组件模板内容可以是模板字符串： 使用反向的点，ESC下边的按键

        template:`
        <div>
            <button @click="count++" >点击了{{count}}</button>
            <button>测试</button>
        </div>
        
        `,

3、组件的命名

　　　　短横线：Vue.component('my-component-name', { /* ... */ })

　　　　驼峰命名：Vue.component('MyComponentName', { /* ... */ })

　　　　使用注意事项：

　　　　　　使用驼峰式命名的组件，只能在字符串模板（另一个组件里使用）里使用 驼峰式命名的方式，

　　　　　　在vue实例的模板里（<div id="app"></div>）使用，只需要将对应的驼峰式命名，改为对应的短横线名称即可，组件的驼峰式命名仍可保留

4、注册局部组件：

　　　　通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

 

　　　　在父组件（vue实例）里定义：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

　　　　使用： <component-a> </component-a>

　　　　注意：局部组件只能在注册它的父组件里使用 ，（即 <div id="app"></div> 里边，因为是在 vue 实例里边定义的组件）

 5、组件间数据交互：

　　5-1、父组件向子组件传值：

　　　　子组件通过 props接受传递过来的值： 定义props:['title'],

    Vue.component('menu-item',{
        props:['title'],
        template:'<div><span>{{title}}</span></div>'
    });
通过props:['title']

　　　　父组件通过 属性 将值传递给子组件

 

    <div id="app">
        <!-- 
        -->
        <menu-item title='来着父组件的值' ></menu-item>
        <menu-item :title='title'></menu-item>
    </div>

 　   5-2、props数据类型： 字符串String，数值Number，布尔Boolean，数值Array，对象Object 。 使用  :name=""  ，要有冒号，不然会被当做字符串。

　　5-3、子组件向父组件传值：

　　　　原则：单向数据流，虽然子组件可以直接操作父组件的数值，但并不推荐这样做。

　　　　应该这样做：子组件自定义一个事件，父组件监控这个事件

　　　　　　子组件定义一个事件：template:`<div> <button v-on:click="$emit('enlarge-text')">变大字体</button> </div>`

　　　　　　父组件监控：<menu-item @enlarge-text='handel'></menu-item>

　　　　那么如何传一个值？ 

　　　　　　子组件点击事件的 第二个参数

　　　　　　　　template:`<div> <button v-on:click="$emit('enlarge-text',20)">变大字体</button> </div>

　　　　　　父组件使用 $event 接收：　　　　　　　　

　　　　　　　　<menu-item @enlarge-text='handel($event)'></menu-item>
　　5-4、非父子组件传值，兄弟组件传值 
　　　　事件中心：var hub = new Vue();
　　　　在生命周期钩子注册事件：hub.$on()
        mounted:function(){
            //在这里注册事件
            hub.$on('rick-wooo',(val)=>{
                this.num += val;
            });
        }

　　　　兄弟组件调用：hub.$emit()

        methods:{
            //在这里调用兄弟组件的方法，进行传值
            handle :function(){
                hub.$emit('rick-wooo',3);
            }
        },

 

案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
   
</head>
<body>
    <div id="app">
        <!-- 
        -->
        <test-rick></test-rick>
        <test-morty></test-morty>
    </div>

</body>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入组件库,注意顺序，vue先引入 -->
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>

<script type="text/javascript" >
    //1、事件中心
    var hub = new Vue();

    //2、两个兄弟组件
    Vue.component('test-rick',{
        data:function(){
            return {
                num : 0
            }
        },
        template:`
        <div>
        <div>rick {{num}}</div>
            <button v-on:click="handle">rick</button> 
        </div>`,
        methods:{
            //在这里调用兄弟组件的方法，进行传值
            handle :function(){
                hub.$emit('morty-wooo',2)
            }
        },
        mounted:function(){
            //在这里注册事件
            hub.$on('rick-wooo',(val)=>{
                this.num += val;
            });
        }
    });

    Vue.component('test-morty',{
        data:function(){
            return {
                num : 0
            };
        },
        template:`
        <div>
        <div>rick {{num}}</div>
            <button v-on:click="handle">rick</button> 
        </div>`,
        methods:{
            //在这里调用兄弟组件的方法，进行传值
            handle :function(){
                hub.$emit('rick-wooo',3);
            }
        },
        mounted:function(){
            //在这里注册事件
            hub.$on('morty-wooo',(val)=>{
                this.num += val;
            });
        }
    });
    
    //vue的实例也是一个组件
    var vm = new Vue({
        el: '#app',
        data:{
        },
        methods:{
            handel:function(val){
                this.fontSize = this.fontSize+val;
            }
        },
    });
</script>
</html>
兄弟组件传值案例

 6、组件插槽 : 组件模板里边添加 <slot></slot>  插槽

　　<div>提示内容：<slot>默认内容</slot></div>

 　　使用组件时，内容会填充到插槽里边

        <test-rick>内容1</test-rick>
        <test-rick>内容2</test-rick>
        <test-rick></test-rick>
　　
　　具名插槽： 给插槽起一个名字，从而实现多个插槽
7、作用域插槽：父组件获得 子组件插槽里边的数据

 

 

 

 

 

 

 

 

 

。

posted @ 2020-03-16 23:55  柠檬茶lemon  阅读(233)  评论(0)    收藏  举报