vue系统总结2

注册组件

组件其他补充

组件数据存放

父子组件通信

父级向子级传递信息

子级向父级传递信息

插槽slot

1.1什么是组件化

1.2

注册组件的基本步骤

创建组件构造器

注册组件

使用组件

<div id="app">
    <mycpn></mycpn>
</div>
<script src="../js/vue.js"></script>
<script>
    //1.创建组件构造器对象
    const cpn = Vue.extend({
        template: `
        <div>
            <h2>我是标题</h2>
            <p>我是内容,哈哈哈哈</p>
            <p>我是内容,呵呵呵呵呵呵</p>
        </div>`
    })

    Vue.component('mycpn',cpn)

    const app = new Vue({
        el: '#app',
        data: {

        }
    })
</script>

1.3全局组件和局部组件

当我们通过调用Vue.component()注册组件时,组件的注册是全局的

这意味着该组件可以在任意Vue实例下使用

 

如果我们注册的组件时挂载在某个实例中,那么就是局部组件

 

<div id="app">
    <mycpn></mycpn>
    <cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
    //1.创建组件构造器
    const cpn = Vue.extend({
        template: `
        <div>
            <h2>我是标题1</h2>
            <p>我是内容 哈哈哈哈</p>
        </div>
        `
    })
    // 2.注册组件(全局组件,意味着可以再多个vue实例中使用)
    Vue.component('mycpn',cpn)

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn:cpn
        }
    })
</script>

1.4父组件和子组件:

<div id="app">
    <cpn2></cpn2>
    <h2>--------</h2>
    <cpn1></cpn1>
</div>

<script src="../js/vue.js"></script>

<script>
    // 1.创建第一个组件构造器
    const cpn1 = Vue.extend({
        template: `<div>
        <h2>我是子组件标题</h2>
        <p>我是子组件内容 哈哈哈</p>
        </div>`
    })

    //2.创建第二个组件构造器
    const cpn2 = Vue.extend({
        template:`<div>
        <h2>我是父组件标题</h2>
        <p>我是父组件内容 呵呵呵呵呵</p>
        <cpn1></cpn1>
        </div>`,
        //在组件内部使用带s的components
        components:{
            cpn1: cpn1
        }
    })
    const app = new Vue({
        el:'#app',
        data:{
        },
        components:{
            cpn2: cpn2,
            cpn1: cpn1
        }
    })
</script>

1.5注册组件语法糖:

<div id="app">
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>

    //一.全局组件注册的语法糖
    //1.创造组件构造器
    // const cpn1 = Vue.extend()

    //2.注册组件
    // Vue.component('cpn',{
    //     template: `<div>
    //     <h2>我是全局组件标题</h2>
    //     <p>我是全局组件内容 呵呵呵呵呵</p>
    //     </div>`
    // })

    const app = new Vue({
        el: '#app',
        data: {
        },
        components:{
            cpn: {
                template: `<div>
                <h2>我是局部组件标题</h2>
                <p>我是局部组件内容 呵呵呵呵呵</p>
                </div>`
            }
        }
    })
</script>

1.6模板的分离写法:

<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

<!-- 第一种模板 注意:必须是text/x-template类型-->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</script> -->

<!-- 第二种模板:template -->
<template id="cpn">
    <div>
        <h2>这是标题哈哈</h2>
        <p>这是内容哈哈</p>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    // 1.注册一个全局组件
    Vue.component('cpn',{
        template: '#cpn'
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>

1.7组件数据的存放

组件自己的数据存放在哪里呢?

组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)

只是这个data属性必须是一个函数

而且这个函数返回一个对象，对象内部保存着数据

<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

<!-- 第一种模板 注意:必须是text/x-template类型-->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</script> -->

<!-- 第二种模板:template -->
<template id="cpn">
    <div>
        <h2>{{title}}</h2>
        <p>这是内容哈哈</p>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    // 1.注册一个全局组件
    Vue.component('cpn',{
        template: '#cpn',
        data() {
            return {
                title: '测试文件'

            }
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>

1.8演示:为什么data是一个函数?

首先,如果不是一个函数,vue直接回报错

其次,原因在于Vue让每个组件对象都返回一个新的对象,因为如果是同一个对象的,组件在多次使用后相互影响

 

<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h2>当前计数是 : {{counter}}</h2>
        <button @click='innerment'>+</button>
        <button @click='denerment'>-</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>

    Vue.component('cpn',{
        template: '#cpn',
        data () {
            return {
                counter: 0
            }
        },
        methods:{
            innerment(){
                this.counter++
            },
            denerment(){
                this.counter--
            },
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>

1.9.1父子组件的通信

一些数据需要从上层传递到下层

vue官方提到:

通过props向子组件传递数据

通过事件向父组件发送消息

props基本用法

在组件中,使用选项props来声明需要从父级接收到的数据

props的值有两种方式

方式一: 字符串数组,数组中的字符串就是传递时的名称

方式二: 对象,对象可以设置传递时的类型,也可以设置默认值等

<body>
<div id="app">
    <!-- 使用cpn子组件 动态绑定movies和message -->
    <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn">
    <div>
        <ul>
            <!-- 循环cmovies的电影  -->
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <h2>{{cmessage}}</h2>
    </div>
</template>
<!-- 引入vue文件 -->
<script src="../js/vue.js"></script>
<script>
    //实例化子组件
    const cpn = {
        //模板对象,和el挂载点相似,注意:template必须要有id为cpn的
        template: '#cpn',
        //子组件data必须是一个函数,每个组件调用的时候不能是同一个对象,
        //只能是一个函数,必须带有return返回值
        data(){
            return {}
        },
        methods:{},
        //父组件向子组件传递信息使用props方法
        props:{
            cmovies:{
                type:Array,
                default(){
                    return []
                },
                required: true
            },
            cmessage: {
                type:String,
                default: 'aaaa',
                required: true
            }
        }
    }

    //根组件,也可以算父组件,实例化vue对象
    const app = new Vue({
        //挂载点:#app
        el: '#app',
        //对象中数据现在不用函数
        data: {
            message: '测试文件',
            movies:['肖申克的救赎','当幸福来敲门','加勒比海盗','了不起的盖茨比']
        },
        //注册组件
        components:{
            cpn
        }
    })
</script>

除了数组之外,也可以使用对象,当需要对props进行类型验证时,就需要对象写法了

支持的类型:

String(字符串) Number(数字) Boolean(布尔值) Array(数组)

Object(对象) Date(时间) Function(函数) Symbol

 

1.9.2子级向父级传递

方式:自定义事件

流程:

在子组件中,通过$emit() 来出发事件

在父组件中,通过v-on来监听子组件事件

 

<div id="app">
    <cpn @itembtn="cpnclick"></cpn>
</div>

<template id="cpn">
    <div>
        <button v-for="item in categories"
        @click="itemclick(item)">{{item.name}}</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn',
        data () {
            return {
                categories: [
                    {id: 'aaa',name: '打开应用'},
                    {id: 'bbb',name: '获取应用'},
                    {id: 'ccc',name: '新建应用'},
                    {id: 'ddd',name: '保存应用'},
                    {id: 'eee',name: '关闭应用'},
                ]
            }
        },
        methods: {
            itemclick (item) {
                console.log(item.id)
                this.$emit('itembtn',item)
            }
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn
        },
        methods:{
            cpnclick (item) {
                console.log(item.id)
            }
        }
    })
</script>

2.0父子组件的访问方式: $children

有时候需要父组件直接访问子组件,子组件直接访问父组件,或者子组件访问根组件

父组件访问子组件: 使用$children或者$refs

子组件访问父组件: 使用$parent

 

<div id="app">
    <cpn ref="ccc"></cpn>
    <cpn ref="bbb"></cpn>
    <cpn ref="aaa"></cpn>
    <button @click='btnClick'>测试按钮</button>
</div>

<template id="cpn">
    <div>
        <h2>我是子组件</h2>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btnClick() {
                //1$children 用法比较少 是获取全部的自组件里面方法
                // console.log(this.$children)
                // // this.$children[0].showMessage()
                // for(let c of this.$children){
                //     c.showMessage()
                //     console.log(c.name)
                // }

                //2 $refs  用的最多  注意此处写的 是refs ,上面写的是ref=""
                //  $refs  => 对象类型 ,默认是一个空的对象 如果使用上面要用  ref="bbb"
                console.log(this.$refs.aaa.name)
                this.$refs.aaa.showMessage()
                console.log(this.$refs.bbb.name)
                this.$refs.bbb.showMessage()
                console.log(this.$refs.ccc.name)
                this.$refs.ccc.showMessage()

            }
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        name: `中级的欲望 通过努力可以获得
                        低级的欲望 通过放纵可以获得`
                    }
                },
                methods: {
                    showMessage() {
                        console.log('顶级的欲望 通过煎熬才能获得')
                    }
                }
            }
        }
    })
</script>

this.$children是一个数组类型,它包含了所有子组件对象

$children的缺陷

通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值.

但是当子组件过多,我们需要拿到其中一个时,往往不能确定他的索引值,甚至还可能发生变化

有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs

 

$refs的使用:

$refs和ref指令通常是一起使用的

首先,我们通过ref 给某一个子组件绑定一个特定的ID

其次,通过this.$refs.ID就可以访问到该组件了

 

 

2.1父子组件的访问方法: $parent

尽管在Vue开发中,我们允许通过$parent来访问父组件,但是在真实开发中尽量不要这样做

子组件应该尽量避免访问父组件的数据,因为这样耦合度太高了

如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题

另外,更不好做的是用过$parent直接改父组件的状态,那么父组件中的状态将变得不稳定

 

<div id="app">
    <h2>这是vue实例</h2>
    <cpn></cpn>
</div>

<template id="cpn">
    <div>
        <h2>这是自组件</h2>
        <ccpn></ccpn>
    </div>
</template>

<template id="ccpn">
    <div>
        <h2>我是子组件内部组件</h2>
        <button @click="btnClick">点击按钮</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn',
                data(){
                    return {
                        name: `
                        低级的欲望 通过放纵就可获得
                        高级的欲望 通过自律方可获得
                        顶级的欲望 通过骄傲才可获得`
                    }
                },
                components: {
                    ccpn: {
                        template: '#ccpn',
                        methods: {
                            btnClick() {
                                //1第一种 $parent 只能访问父级组件的数据,但是耦合性很高,不能扩展
                                // console.log(this.$parent)
                                // console.log(this.$parent.name)

                                //2第二种,通过root 获取根组件的数据
                                console.log(this.$root)
                                console.log(this.$root.message)
                            }
                        }
                    }
                }
            }
        }
    })
</script>

2.2插槽slot

编译作用域:

父组件模板的所有东西都会在父级作用域内编译,子组件模板的所有东西都会在子级作用域内编译

 

插槽的作用:为了让我们封装的组件更加具有扩展性

如何使用slot:

在子组件中,使用特殊的元素<slot>就可以为子组件开启一个插槽

该插槽的插入什么内容取决于父组件如何使用

<div id="app">
    <cpn>
        <span>姓名</span>
        <input type="text" name='username' placeholder="请输入姓名">
    </cpn>
    <cpn>
        <span>密码</span>
        <input type="text" name="password" placeholder="请输入密码">
    </cpn>
    <cpn>
        <button>登录</button>
        <button>注册</button>
    </cpn>
</div>

<template id="cpn">
    <div>
        <!-- <h2>使用slot</h2>
        <button>slot</button> -->
        <slot>
            <button>初始按钮</button>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hell Vue.js'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {}
                },
                methods:{}
            }
        }
    })
</script>

具名插槽slot

当子组件的功能复杂时,插槽并非一个

只要给slot元素一个name属性即可

<slot name="myslot"></slot>

<div id="app">
    <cpn>
        <button slot="left">返回</button>
    </cpn>
    <cpn>
        <span slot="left">姓名</span>
        <input type="text" slot="center" placeholder="请输入姓名">
    </cpn>
    <cpn>
        <span slot="left">密码</span>
        <input type="text" slot="center" placeholder="请输入密码">
    </cpn>
    <cpn>
        <button slot="left">登录</button>
        <button slot="right">注册</button>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot name="left"></slot>
        <slot name="center"></slot>
        <slot name="right"></slot>
        <slot name="noname"></slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue.js'
        },
        components:{
            cpn: {
                template: '#cpn',
                methods:{},
                data() {
                    return {}
                },
                props:{},
                computed:{}
            }
        }
    })
</script>

作用域插槽:

父组件替换插槽的标签,但是内容由子组件来提供

 

<div id="app">
    <cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <h3>你有为自己努力过吗</h3>
        <button v-show="isShow"></button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue.js',
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                props:{},
                methods:{},
                data () {
                    return {
                        isShow: false
                    }
                }
            }

        }
    })
</script>

插槽作用域的使用:

核心是在slot中加上属性: :data

然后在父组件中调用自组件数据: slot-scope="slot"

 

<div id="app">
    <cpn></cpn>
    <cpn>
        <span slot="aaa">测试文件</span>
    </cpn>
    <cpn>
        <div slot="aaa" slot-scope="slot">
            <span v-for="item in slot.data">{{item}} -</span>
        </div>
    </cpn>
    <cpn>
        <div slot="aaa" slot-scope="slot">
            <span v-for="item in slot.data">{{item}} $</span>
        </div>
    </cpn>
    <cpn>
        <div slot="aaa" slot-scope='slot'>
            <!-- <span v-for="item in slot.data">{{item}}</span> -->
            <span>{{slot.data.join('--')}}</span>
        </div>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot name='aaa' :data="pLanges">
            <ul>
                <li v-for="item in pLanges">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue.js'
        },
        components:{
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        pLanges: ['C++','python','java','js','php']
                    }
                }
            }
        }
    })
</script>