14 小程序-组件通信修饰符、插槽、前端模块化开发

1.父子通信扩展

1.1.-父访问子组件的访问方式 $children $refs(实例中加标签)

某些时候，父子组件进行调用某些方法，实现功能，这里就要用的父子组件的访问方式的修饰符，有时候我们需要父组件直接通过对象来访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用$children或$refs（reference 引用意思）

其中￥children也是数组，子组件对象类型是数组类型是vuecomponent

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

一般来说，我们也不会用￥children拿子组件东西（下标拿毕竟不安全，万一加其他组件，容易出错,而且除非是拿全部组件，才会用$children），我们用$refs,如果组件不加内容则为空.

$refs=》对象类型，默认是空对象，加ref=‘bbb’

      必须在子组件使用时候，在父实例中加上ref=‘XXX’，

然后父组件监听事件中给予使用this.$refs

<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button  @click="btnclick">按钮</button>
</div>

<template id="cpn">
    <h2>我是子组件</h2>
</template>
<script>
    const app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
          btnclick(){
              console.log(this.$children);
              console.log('---------')
              console.log(this.$refs.aaa.name);

          }
        },
        components:{
            cpn:{
                template:'#cpn',
                methods:{
                    showMessage222(){
                        console.log('showMessage222')
                    }
                },
                data(){
                    return{
                        name:'我是子组件的name'
                    }
                }
            }
        }
    })
</script>

1.2.-子访问父组件的访问方式 parent root

当然一般很少这么使用，因为子组件还是建议相对独立，否则耦合性太高

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

</div>
<template id="cpn">
    <div>
        <h2>我是cpn组件</h2>
        <ccpn></ccpn>
    </div>
</template>
<template id="ccpn">
    <div>
        <div>我是子组件</div>
        <button @click="btnclick()">按钮</button>
    </div>
</template>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return {
                        name:'我是cpn组件的name'

                    }
                },
                components: {
                    ccpn:{
                        template:'#ccpn',
                        methods:{
                            btnclick(){
                                //    访问父组件
                                console.log(this.$parent);
                                console.log(this.$parent.name);
                            }
                        }
                    }
                }

            },

        }

    })


</script>

可以使用this.$root,直接访问vue实例，因为$parent访问的是父组件

this.￥root.message也就可以访问到“你好啊”

2. 插槽slot 使用

2.1 插槽slot基本使用

slot翻译为插槽：

在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

栗子：移动网站中的导航栏。

移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。

但是，每个页面的导航是一样的吗？No，我以京东M站为例

<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件，哈哈哈</p>
        <slot></slot>
    </div>
</template>

如何使用呢？

最基本的使用如下：引用的组件内部进行标签替换。

<div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn><span>哈哈</span></cpn>
    <cpn><i>合伙</i></cpn>
    <cpn><button>按钮</button></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件，哈哈哈</p>
        <slot></slot>
    </div>
</template>

当然如果说某个插槽非常常用，比方说按钮，那么我们给予模板template添加默认插槽：则效果与上面一样

<div id="app">
    <cpn></cpn>
    <cpn><span>哈哈</span></cpn>
    <cpn><i>合伙</i></cpn>
    <cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件，哈哈哈</p>
        <slot><button>按钮</button></slot>
    </div>
</template>

2.2 插槽slot-具名插槽

具名插槽，意思是给每个slot添加个名字，那么使用它时，如果没有名字，进行修改插槽，那么则默认给没有名字的插槽进行变化

</head>
<body>
<div id="app">
    <cpn><button>按钮</button></cpn>
</div>
<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <slot>哈哈哈</slot>
    </div>
</template>

那么给予名字时候，不能用name，而是用slot=‘left’名字即可

<div id="app">
    <cpn><button slot="left">按钮</button></cpn>
</div>
<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <slot>哈哈哈</slot>
    </div>
</template>

2.3 编译作用域与插槽作用域

在真正学习插槽之前，我们需要先理解一个概念：编译作用域。官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念：

我们来考虑下面的代码是否最终是可以渲染出来的：

<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性。
isShow属性包含在组件中，也包含在Vue实例中。

答案：最终可以渲染出来，也就是使用的是Vue实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
而我们在使用<my-cpn v-show="isShow"></my-cpn>的时候，整个组件的使用过程是相当于在父组件中出现的。
那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

<div id="app">
<!--    这里v-show使用实例的，当成最简单的变量，去vue实例作用域找-->
    <cpn v-show="isShow"></cpn>
<!--    这里item也是去vue实例里面找-->
    <cpn v-for="item in names"></cpn>
</div>

<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <p>我是子组件，哈哈哈</p>
<!--        这里用的是子组件的作用域isShow-->
        <button v-show="isShow">按钮</button>
    </div>
</template>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            isShow:true
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        isShow:false
                    }
                }
            }
        }
    })
</script>

作用域插槽-

作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

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

我们先提一个需求：子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']

需要在多个界面进行展示：

某些界面是以水平方向一一展示的，
某些界面是以列表形式展示的，
某些界面直接展示一个数组

内容在子组件，比方说子组件按逗号分隔，希望父组件告诉我们如何展示，怎么办呢？利用slot作用域插槽就可以了，我们来看看子组件的定义：

<body>
<div id="app">
    <cpn></cpn>
    <cpn>
<!--        目的 获取子组件的planguages  vue2.5以前版本-->
        <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}}-</span>
        </template>
    </cpn>
    <cpn>
        <!--        目的 获取子组件的planguages  vue2.5以前版本-->
        <template slot-scope="slot">
<!--            join的作用是将数组转为字符串，每个数组元素以某种方式拼接-->
            <span >{{slot.data.join('=')}}</span>
        </template>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot v-bind:data="planguages">
            <ul>
                <li v-for="item in planguages"> {{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        planguages:['JavaScript', 'Python', 'Swift', 'Go', 'C++']
                    }
                }
            }
        }
    })
</script>