VUE解构插槽PROP

作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件)，你也可以使用 ES2015 解构来传入具体的插槽 prop

VUE中prop,$emit,solt

1.父组件可以使用props把数据传给子组件；

2.子组件可以使用$emit触发父组件的自定义事件；

vm.$emit(event,arg);//触发当前实例上的事件；

vm.$on(event,fn);//监听event事件后运行fn； 代码：

<div id="app">
        <btn-primary title="this is a title">
        <template v-slot:first>
        <ul>
            <li v-for="item in 5" :key="item">{{item}}</li>
        </ul>
    </template>
    <template v-slot:last>
        <button>last</button>
    </template>
    </btn-primary>
        <btn-primary :title="msg" @chang2="change"></btn-primary>
    </div>
    <script>
         Vue.component("btn-primary",{
            data(){
                return{
                    count:5
                }
            },
            props:["title"],//同名变量
            methods:{
                click(){
                    this.count++;
                }
            },
            template:"<button @click='$emit(\"change2\",count,++count)'><slot name='first'></slot><slot name='last'></slot>{{count}}--{{title}}</button>"
        })
        let vm = new Vue({
            el: "#app",
            data: {
               msg:"this is a msg"
            },
            methods:{
                change(){
                    console.log("子组件传递过来的值"+val)
                }
            }
        })
    </script>