插槽slot使用

插槽作用： 父组件 传递 结构 给 子组件

官网文档：

通过插槽分发内容

插槽后备内容 插槽使用2个步骤

第一步：在子组件中定义一个插槽 <slot>默认值：如果父组件没有传递则默认显示</slot>

第二步：在父组件中传递结构: <子组件>父组件需要传递的结构</子组件>

子组件

  <div class="son">
    <h3>我是子组件</h3>
    <h4>商品名称</h4>
    <!-- 插槽：可以让父组件决定这里放什么。 也可以设置默认值 -->
    <slot>我是默认值</slot>
  </div>
</template>

<script>
export default {
  name: "goods",
  data() {
    return {}
  }
}
</script>

<style scoped>
.son {
  border: 1px solid red;
}
</style>

父组件

    <div id="app">
        <h1>我是父组件</h1>
        <!-- 组件作用：页面内容复用 -->
        <local1>
            <button>
                <a href="http://www.itheima.com">点击购买</a>
            </button>
        </local1>
        <local1>
            <button disabled>已卖完</button>
        </local1>
    </div>
</template>

<script>

//导入局部组件
import local1 from './local1.vue'
export default {
    
    data(){
        return{

        }
    },
    components:{
        local1
    }
}
</script>

<style>
    #app{
        border: 1px solid #000;
    }
</style>

注意

插槽的作用是什么让父组件传递什么到子组件中?

`html结构`

插槽的默认值写哪里?

`<solt>默认值</slot>`