内容分发和props类型

最新推荐文章于 2024-05-13 17:04:40 发布

吃蛋糕的居居

最新推荐文章于 2024-05-13 17:04:40 发布

阅读量532

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45133582/article/details/119257001

版权

本文介绍了Vue中组件props的类型限制，如Number、String等基本类型，以及如何设置必填和默认值。同时，探讨了内容分发的概念，通过slot实现父组件内容在子组件内的显示控制，包括默认插槽和具名插槽的使用。最后，提到了<keep-alive>组件用于缓存动态组件，但可能带来的内存占用问题。

摘要由CSDN通过智能技术生成

一、props类型限制

如果prop是一个对象，不是字符串数组时，它包含验证:

验证类型：String、Number、Boolean、Function、Object、Array

 props: {
    // 基础类型检测，（‘null’意思是任何类型都可以）,在传参值后加上类型,会自动判断,会限制传的值的参数类型.
    propsA: Number,
    //多种类型,并列排序
    propsB: [String, Number],
    // 必传且是字符串
    propsC: {
      type: String,
      required: true,
    },
    // 数字,有默认值
    propsD: {
      type: Number,
      default: 100
    },
  },
  react:中的是.number.isRequired(必须写的)

二、内容分发

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。

简单来说，假如父组件需要在子组件内放一些DOM, 那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活

vue使用特殊的<slot>元素作为原始内容的插槽

例如默认情况下父组件在子组件内套的内容，是不显示的。

使用单个插槽(slot) 可以将父组件放在子组件的内容。

注：即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了<slot></slot>这个标签。

多个插槽叫做具名slot:

具名slot：被分发的内容的作用域，根据其所在模板决定，受父组件所控制。

index.html:

<!doctype html>
<html>

<head>
  <title>VUE练习</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>

<body>
  <div id="e">
    <App message="我是父亲的值" v-on:addclick="getnum">
      <i slot="titles">我是头部</i>
      <b slot="info">我是内容</b>
      我是其他的内容
    </App>
    <App1 v-bind:message1="sum"></App1>
    <App2></App2>
    <App3></App3>
    <App4></App4>
  </div>
  <script src="./bundle.js"></script>
</body>

</html>

App.vue:

<template>
  <div class="app1">
    <p>
      <!-- 分发 -->
      <slot name="titles"></slot>
      我是父亲的内容:
      <slot name="info"></slot>
      <!-- 具名分发 -->
      <slot></slot>
    </p>
    <!-- <input type="button" value="加一" v-on:click="add" /> -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "",
      num: 0,
    };
  }, //     required: true,

  //  type: String,
  props: {
    message: Number,
  },
  methods: {
    add: function () {
      this.num++; //儿子自己计算num值
      this.$emit("addclick", this.num); //通过emit调用父亲传来的自定义事件，把儿子计算后num作为参数传给父亲
    },
  },
};
</script>

<style scoped>
.app1 {
  width: 100%;
  height: 100px;
  background: rgb(240, 141, 141);
}
</style>

最终效果图：

三、Keep-alive:

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->

<keep-alive>

  <component v-bind:is="currentTabComponent">

</component>

</keep-alive>

缺点：占缓存，浪费缓存。

吃蛋糕的居居

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容分发和props类型

一、props类型限制如果prop是一个对象，不是字符串数组时，它包含验证:验证类型：String、Number、Boolean、Function、Object、Array props: { // 基础类型检测，（‘null’意思是任何类型都可以）,在传参值后加上类型,会自动判断,会限制传的值的参数类型. propsA: Number, //多种类型,并列排序 propsB: [String, Number], // 必传且是字符串 prop..
复制链接

扫一扫