Vue--组件化开发

1. 组件注册

• 1.全局组件注册语法

	//Vue.component(组件名称，{
        //data:组件数据（函数），
        //template:组件模板内容
    //})
    //------------------------------
    Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button @click="count++">点击了{{count}}次</button>',
        })

• 2.组件用法

	//<div id="app">
        //<组件名称></组件名称>  每个组件数据是独立的
    //</div>
    //------------------------------------------------------
    <div id="app">
        <button-counter></button-counter>
    </div>

• 3.组件注册注意事项

• data必须是一个函数
• 组件模板内容必须是单个根元素
• 组件模板内容可以是模板字符串
• 组件命名方式 短横线|驼峰式(驼峰只能用在字符串模板中)

• 4.局部组件注册

• 在Vue 中 通过 components
• 注意 全局的不带s 局部的带s

	var ComponentA = {}
    var ComponentB = {}
    new Vue({
        el:'#app',
        components{
            'component-a':ComponentA,
            'component-b':ComponentB,
        }
    })
    //局部组件只能在注册他的父组件中使用

//局部组件注册
	<div id="app">
        <hello-world></hello-world>
        <hello-world1></hello-world1>
        <hello-world2></hello-world2>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        var HelloWorld = {
            data: function () {
                return {
                    msg: 'hello'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var HelloWorld1 = {
            data: function () {
                return {
                    msg: 'hello1'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var HelloWorld2 = {
            data: function () {
                return {
                    msg: 'hello2'
                }
            },
            template: '<div>{{msg}}</div>'
        }
        var app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                'hello-world': HelloWorld,
                'hello-world1': HelloWorld1,
                'hello-world2': HelloWorld2,
            }
        })
    </script>

2. Vue调试工具安装

推荐一个简单的安装方法，详见链接

3. 组件间数据交互

1.父组件向子组件传值

• 父组件发送的形式是以属性的形式绑定值到子组件身上。
• 然后子组件用属性props接收

• 组件内部通过props接收传递过来的值

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

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

		<menu-item title='来自父组件的数据'></menu-item>
        <menu-item :title='title'></menu-item>

• props属性名规则

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

• props属性值类型

• 可以传递静态值
• 也可以传递动态值
• 动态值可以是：字符串、数字、布尔值、数组、对象

//父组件向子组件传值
	<div id="app">
        <div>{{pmsg}}</div>
        <menu-item title="来自父组件的值"></menu-item>
        <menu-item :title="ptitle"></menu-item>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['title'],
            data: function () {
                return {
                    msg: '子组件本身数据'
                }
            },
            template: '<div>{{msg +"-----"+ title}}</div>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态'
            }
        })
    </script>

2. 子组件向父组件传值

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

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

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

• 父组件监听子组件的事件

	<menu-item @emlarge-text='fontSize += 0.1'></menu-item>

• 子组件通过自定义事件向父组件传递数据

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

• 父组件监听子组件的事件

	<menu-item @enlarge-text='fontSize += $event'></menu-item> 

//子组件向父组件传值
	<div id="app">
        <div :style="{fontSize:fontSize+'px'}">{{pmsg}}</div>
        <menu-item :parr="parr" @enlarge-text="handle($event)"></menu-item>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        Vue.component('menu-item', {
            props: ['parr'],
            template: `
            <div>
                <ul>
                    <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
                <ul>
                <button @click='parr.push("lemon")'>点击</button>
                <button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小</button>
            </div>
        `
        })
        var app = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中的内容',
                parr: ['apple', 'orange', 'banana'],
                fontSize: 10
            },
            methods: {
                handle: function (val) {
                    this.fontSize += val;
                }
            },
        })
    </script>

3.非父子组件间传值

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

• 单独的事件中心管理组件间的通信

		var eventHub = new Vue()

• 监听事件与销毁事件

 		eventHub.$on('add-todo',addTodo)
        eventHub.$off('add-todo')

• 触发事件

 		eventHub.$emit('add-todo',id)

//非父子组件间传值
	<div id="app">
        <div>父组件</div>
        <div>
            <button @click="handle">销毁</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        //提供事件中心
        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 () {
                    //触法兄弟组件的事件
                    hub.$emit('jerry-event', 2)
                }
            },
            mounted() {
                //监听事件
                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 () {
                    //触法兄弟组件的事件
                    hub.$emit('tom-event', 1)
                }
            },
            mounted() {
                //监听事件
                hub.$on('jerry-event', (val) => {
                    this.num += val
                })
            },
        })
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                handle: function () {
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
                }
            }
        })
    </script>

4. 组件插槽

1.组件插槽的作用

父组件向子组件传递内容

2.组件插槽基本用法

• 插槽位置

	//在子组件模板中 
	<slot></slot>

• 插槽内容

 	<alert-box>****</alert-box> 

3.具名插槽用法

• 插槽定义

		<slot name="header"></slot>

• 用法

		<base-layout>
            <p slot="header">标题</p> //加多个标签用<template slot="hender"></template>
        </base-layout>

4.作用域插槽

应用于：父组件对子组件的内容进行加工处理

• 插槽定义

		<ul>
            <li v-for="item in list" :key="item.id">
                <solt :item="item">
                    {{item.name}}
                </solt>
            </li>
        </ul>

• 插槽内容

 		<fruit-list :list="list">
            <template slot-scope="slotProps">
                <p v-if="slotProps.item.current">
                    {{slotProps.item.text}}
                </p>
            </template>
        </fruit-list>

Vue组件化开发小案例–购物车