前端学习——插槽

一 插槽的简单用法

1.1 用处和用法

当自定义组件没有slot元素的时候，则该标签开始至结束之间的全部内容都会被丢弃。
当使用插槽slot的时候，插槽内可以包含任意内容，包括HTML，如：

<div id="app">
    <my_div>
        input:
        <input type="button" value="按钮">
    </my_div>
</div>

new Vue({
   
    el: '#app',
    components: {
   
        my_div: {
   
            template: `
                <div>
                    <slot></slot>
                </div>
            `
        }
    }
})

1.2 编译作用域

重要：VUE的作用域应该好好整理下
插槽不在标签作用域的范围内，比如这里的{ {message}}就没有用，VUE会报错

[Vue warn]: Property or method “message” is not defined on the instance but referenced during render.

<div id="app">
    <my_div message="你好哇，李银河">
        author:{
  {message}}{
  {author}}
        <input @click='display_alert' type="button" value="按钮">
    </my_div>
</div>

而定义在VUE实例中的属性则可以使用（和native html一样）

new Vue({
   
    el: '#app',
    data: {
   
        author: "王小波"
    },
    methods:{
   
        display_alert:function(){