【vue】组件插槽、组件自定义事件

插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
语法：:v-slot:插槽名 语法糖:#插槽名

<template>
  <div>
      <box :msg="name" :ae="age"></box>
      <box msg="小红" ae="21"></box>

      <box1 :title="title" :name="name">
        <h4 style="color:red">app组件的插槽</h4>
        11111
      </box1>

      <box2 title="box2的组件">
        <template v-slot:n1>
         <h1>box2</h1>
        </template>
      </box2>
      <box2 title="box2的组件">
        <!-- 语法糖 #号代替 -->
        <template #n1>
         <h1>box266666</h1>
        </template>
        <h1 style="color:blue">box22222</h1>
        <template #n2>
         <h1>第二个</h1>
        </template>
      </box2>

  </div>
</template>

组件自定义指令

v-on绑定

实现步骤：

1. 首先给子组件标签通过v-on：自定义事件名字=“函数名”，绑定一个函数，接着在父组件APP的methods里面定义这个函数（需要接收一个参数）
2. 在子组件中，首先定义一个click事件，接着在methods内书写click事件函数，在其内部通过this.$emit（）去触发APP组件里面的自定义事件，括号内的第一个参数是自定义事件名字，后面的参数是数据，（注意：给哪个子组件绑定自定义事件就去哪个子组件去触发这个事件）
3. 在子组件的methods里面定义触发这个函数的函数，通过this.函数名括号传数据
   app组件代码

<template>
  <div>
    <!-- 这是原生事件 -->
    <button @click="but">点我触发原生事件</button>

    <!-- 组件自定义事件 -->
    <Nav v-on:myNav="fn"></Nav>
    <!-- 这里的click不是原生的，而是自定义的 -->
    <Nav v-on:click="fn2"></Nav>
    <!-- 这里Nav1直接就是原生的点击事件 不需要内部触发 使用native方法 此方法只能提供官方的事件，自己写的无法读取-->
    <Nav1 v-on:click.native="fn3"></Nav1>
  </div>
</template>

<script>
import Nav from "@/com/Nav.vue"
import Nav1 from "@/com/Nav1.vue"
export default {
  methods: {
    but() {
      // 事件三要素：在原生事件绑定中button就是事件源 click事件类型  but就是监听器  也是事件处理程序
      console.log("点击到了");
    },
    fn(a,b){
      //Nav组件是事件源 myNav是Nav组件绑定的事件类型 fn是Nav组件上绑定的监听器
      // myNav由Nav组件内部自己设计
      console.log("myNav事件触发了",a,b);
    },
    fn2(){
      console.log("fn2触发了");
    },
    fn3(){
      console.log("fn3触发了");
    }
  },
  components:{
    Nav,
    Nav1,
  }
};
</script>

子组件Nav代码

<template>
    <div>
        <h1>{{age}}</h1>
        <button @click="add">点击增加</button>
        <button @click="x">点击触发组件的click事件</button>
    </div>
</template>
<script>

export default {
    data() {
        return {
            age: 0,
        };
    },
    methods: {
        add() {
            this.age++
        },
        x(){
            // 这里点击触发组件的click自定义事件
            this.$emit("click")
        }
    },
    //   监听
    watch: {
        age(e) {
            if (e == 3) {
                // 这里e为3时触发组件内的自定义事件  还可以传值
                this.$emit("myNav",11,22)//myNav事件触发了
            }
        },
       
    }
}
</script>

子组件Nav1代码
组件上也可以绑定原生DOM事件，需要使用native修饰符

<template>
    <div>
   <!-- 这里是Nav1组件上使用了native方法 -->
      <button>Nav1</button>
    </div>
</template>