• Vue基础语法（五）

    目录

    一、插槽

    1、格式

    2、内容

    3、原理

     二、具名插槽

    1、定义

    2、步骤

    三、作用域插槽

                    1、使用前提

                    2、作用

                    3、步骤

     四、子组件向父组件通信总结

    1、三步骤

    2、多参数传递例子

    一、插槽

    1、格式

    放在子组件

    <slot>内容slot>

    2、内容

    可以放任何模块的代码

    3、原理

    父组件引用时，填写内容会被应用到插槽

    css模块

    html模块

    1. <body>
    2.     <div id="app">
    3.         <cpn>
    4.             <a href="">点击a>
    5.         cpn>
    6.         <cpn>
    7.             <button>点击button>
    8.         cpn>
    9.         <cpn>cpn>
    10.     div>
    11.     <template id="cpn">
    12.         <div>
    13.             <div class="box">
    14.                 <h1>{{msg}}h1>
    15.                 <slot>
    16.                     <h4>默认内容h4>
    17.                 slot>
    18.             div>
    19.         div>
    20.     template>
    21.     <script>
    22.         new Vue({
    23.             el:'#app',
    24.             components:{
    25.                 cpn:{
    26.                     template:'#cpn',
    27.                     data(){
    28.                         return{
    29.                             msg:'子组件'
    30.                         }
    31.                     }
    32.                 }
    33.             }
    34.         })
    35.     script>
    36. body>

     二、具名插槽

    1、定义

    使用多个插槽时，给slot添加name属性，设置slot名称

    2、步骤

    （1）标签添加绑定name属性

    （2）便签显示处用