vue三大组件-事件-插槽

vue三大组件-事件

对于vue中的组件时间, 主要分为两类

普通事件	修饰符事件
通过@click, @input, @change, @xxx 等事件通过 this,$emit(“xxx”, …)触发	@input.trim, @click.stop, @sumit.prevent等, 一般用于原生html, 自定义组件需要自行开发支持(一般较少遇到)

对于一般的事件来说, 是写在模板内的, 但对于vue的单向数据流, 在模板内的方法是不允许更变位于调用页面的东西

所以如果更变模板内的事项,可以直接作用, 而对于更变调用页面数据, 我们采用的是将方法返回的方式来将修改方法返回到调用页面来进行相关操作, 具体实现为 this.emit(‘functionName’, param)

通过代码可以更加形象的描述这个过程

组件

<template>
    <div>
        name: {{ name || "--" }}
        <br />
        <input :value="name" @change="handleChange" />
        <br />
        <br />
        <div @click="handleDivClick">
            <button @click="handleClick">重置成功</button>&nbsp;&nbsp;&nbsp;
            <button @click.stop="handleClick">重置失败</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EventDemo",
        props: {
            name: String
        },
        methods: {
            handleChange(e) {
                this.$emit("justChange", e.target.value);
            },
            handleDivClick() {
                this.$emit("justChange", "");
            },
            handleClick(e) {
                // 都会失败
                //e.stopPropagation();
            }
        }
    };
</script>

调用页面(部分代码):

<a-tab-pane key="event" tab="事件">
	<Event :name="name" @justChange="handleEventChange" />
</a-tab-pane>

<script>
methods: {
    handleEventChange(val) {
        this.name = val;
    },
}
</script>

​ 先看模板中的handleChange方法, 这个方法的目的是更变 name的值, 作用流程是这样的

通过@(值改变) 调用handleChange, 在 handleChange中, 调用this.$emit(“justChange”, e.target.value);

作用为向父文件回调一个名字为justChange的方法, 第二个参数是返回值, 会在父文件中作为参数

​ 然后在父页面中@change=“handleEventChange” 方法 handleEventChange 与页面中的change绑定,其中的参数’val’为里面返回的 e.target.value, 通过这样一个流程与更变name的值

在这个代码中还存在一个事件冒泡的的问题

<div @click="handleDivClick">
    <button @click="handleClick">重置成功</button>&nbsp;&nbsp;&nbsp;
    <button @click.stop="handleClick">重置失败</button>
</div>

点击重置成功的时候调用的handleClick并没有重置name的功能, 实际功能作用在handleDivClick上, 事件冒泡就是子标签会默认调用包含他的父标签的事件, 也就是上面的handleDivClick事件, 但是我们也可以阻止这样的冒泡行为, 就是@click.stop ,他会阻止事件向上冒泡, 或者在handleClick中使用e.stopPropagation();阻止事件冒泡

三大组件-插槽

---

插槽分为: 普通插槽 – 作用域插槽

语法	普通插槽	作用域插槽
2.5及以下	template solt=“xxx”	template solt=“props”
2.6语法	template v-solt=“xxx”	template v-solt=“props”

建议使用2.6语法, 更高的性能, 3的兼容

总体来讲就是子组件和父组件之间的数据传递

总结

---

总体来说vue的三大, 事件属性和插槽, 三种组件的功能都可以用属性来去实现

主页面的调用
<BigProps
	:name="bigPropsName"
	:on-change="handleBigPropChange"
	:slot-default="getDefault()"
	:slot-title="getTitle()"
	:slot-scope-item="getItem"
/>

子组件
<template>
  <div>
    {{ name }}
    <br />
    <button @click="handleChange">change name</button>
    <br />
    <!-- {{ slotDefault }} -->
    <VNodes :vnodes="slotDefault" />
    <br />
    <VNodes :vnodes="slotTitle" />
    <br />
    <VNodes :vnodes="slotScopeItem({ value: 'vue' })" />
  </div>
</template>

<script>
export default {
  name: "BigProps",
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {
    name: String,
    onChange: {
      type: Function,
      default: () => {}
    },
    slotDefault: Array,
    slotTitle: Array,
    slotScopeItem: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleChange() {
      this.onChange("Hello vue!");
    }
  }
};
</script>

上面使用属性实现了插槽的功能

总体来说三大功能的概念都是 属性的变种, 都能用属性去实现, 其他两种功能更像是属性的语法糖

转载：https://blog.csdn.net/qq_41249913/article/details/101028788