vue组件插槽,自定义指令和$ref的使用

插槽slot使用

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

插槽使用2个步骤

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

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

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

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




父组件
<template>
    <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>

注意

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

   html结构

2. 插槽的默认值写哪里?

   <solt>默认值</slot>

具名插槽

具名插槽作用： 父组件 传递多个html结构 给子组件

具名插槽语法如下

1.给子组件的<slot>添加name属性 ： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

• 注意：这个v-slot指令必须要写在<template>标签中,否则会报错

• <template>是HTML5新增的一个语义化标签，模板的意思。 这个标签本身不会被渲染，因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。

子组件
<template>
  <div class="cell">
      <div class="title" >
          <slot name=&