Vue基础

兄弟组件间的传值

兄弟组件间的传值有以下几种方式：
1 子传父父传子
2 状态管理(Vuex 后面学)
3 中央事件总线 (空的Vue实例)

        // 步骤1 创建一个空的Vue实例, 用来监听和触发自定义事件
        let bus = new Vue()

        let child1 = {
            template:"#tmpl1",
            data(){
                return{
                    bgc:'skyblue'
                }
            },
            created(){   
                // 这个函数什么时候执行？？？ 这个组件创建之后执行， 页面一刷新就已经创建组件了
                // 页面一刷新就会执行这个函数
                // console.log("created");
                // 步骤2 开启监听， 监听有没有其他组件来修改 bgc的值
                // changeBgc 自定义事件名
                bus.$on("changeBgc",val=>{
                    // 事件函数，changeBgc事件被触发的时候就来执行这里的代码
                    this.bgc = val
                })
            }
        }
        let child2 = {
            template:"#tmpl2",
            methods:{
                change(){
                    // 步骤3 触发自定义事件changeBgc
                    bus.$emit("changeBgc","red")
                }
            }
        }
        new Vue({
            el:'#app',
            data:{
    
            },
            components:{
                child1,
                child2,
            }
        })

匿名插槽（很少用到）

    <div id='app'>
        <child>
            <a href="#">这是a标签</a>
            <button>按钮</button>
        </child>
    </div>  
    <template id="tmpl">
        <div>
            <h1>这是标题---子组件</h1>
            <slot></slot>
        </div>
    </template>
    <script>
        let child = {
            template:"#tmpl"
        }
        new Vue({
            el:'#app',
            data:{
    
            },
            components:{
                child
            }
        })

缺点：
把子组件里面的所有内容都渲染到视图上

具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字

    <div id='app'>
        <child>
            <a href="#" slot="link">这是a标签</a>
            <button slot="btn">按钮</button>
        </child>
    </div>  
    <template id="tmpl">
        <div>
            <slot name="btn"></slot>
            <h1>这是标题---子组件</h1>
            <slot name="link"></slot>
        </div>
    </template>
    <script>
        let child = {
            template:"#tmpl"
        }
        new Vue({
            el:'#app',
            data:{
    
            },
            components:{
                child
            }
        })

作用域插槽

默认情况下，父组件使用子组件，插槽数据默认是拿父组件的数据，而不是子组件拿数据。

作用域插槽在父组件使用我们的子组件时，插槽的数据从子组件中拿到数据，而不是从父组件拿到。
slot-scope 值是一个对象，这个对象专门接收标签所对应的slot标签身上的标签属性作为自己的属性

    <div id='app'>
        <child>
            <button slot="btn" slot-scope="scope">按钮 {{scope.mynum}} {{scope.title}}</button>
        </child>
    </div>
    <template id="tmpl">
        <div>
            <h1>这是子组件标题</h1>
            <slot name="btn" :mynum="num" title="哈哈"></slot>    
        </div>
    </template>
    <script>
        let child = {
            template:"#tmpl",
            data(){
                return{
                    num:2
                }
            }
        }
        new Vue({
            el:'#app',
            data:{
                
            },
            components:{
                child
            }
        })

作用域插槽的多种写法

// 1、基本写法
<one-comp>
  <button slot="btn" slot-scope="scope">按钮{{scope.msg}}</button>
</one-comp>

// 2、基本写法之模板写法
<one-comp>
  <template slot="btn" slot-scope="scope">
    <button>按钮{{scope.msg}}</button>
  </template>
</one-comp>

// 3、指令写法
<one-comp v-slot:btn="scope">
  <button>按钮{{scope.msg}}</button>
</one-comp>

// 4、指令写法之模板写法
<one-comp>
  <template v-slot:btn="scope">
    <button>按钮{{scope.msg}}</button>
  </template>
</one-comp>

Vue基础-第五篇