vue中的props

PCthedream

已于 2022-11-13 12:17:40 修改

阅读量2k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-11-07 19:48:42 首次发布

本文链接：https://blog.csdn.net/PCthedream/article/details/127737417

版权

本文介绍了Vue中props的用途、基本用法、静态与动态props、单项数据流原则，以及具名插槽的使用。props允许父组件向子组件传递数据，遵循单向数据流，不应在子组件内修改props。同时提到了具名插槽的定义和使用，增强了组件的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

StuProps.vue:

<template>
    <div class="props-container">
        <h1>我叫:{{name}}</h1>
        <h2>我今年:{{age}}岁</h2>
        <h3>我是:{{gender}}孩子</h3>
        <h4>我喜欢的食物是:</h4>
      <ul>
        <li v-for="(item,index) in fonds" :key="index">{{item}}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
      name:'PropsCom',
      props:["name","age","gender","fonds"]

  }
  </script>
  
  <style >
  .props-container {
    border: 1px solid orange;
    width: 300px;
    background-color: yellowgreen;
    padding: 10px;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
  </style>

App.vue:

<StuProps :name="name" :age="age" :gender="gender" :fonds="['西瓜','哈密瓜','冬瓜','傻瓜']"></StuProps>


    <StuProps :name="'金'" :age="8" :gender="'人妖'" :fonds="['西瓜','哈密瓜','冬瓜','傻瓜']"></StuProps>

data() {
    return {
      name:'战神',
      age:18,
      gender:'男',
    
    }
  },

页面效果图;

props的作用：

props是用于Vue中父组件向子组件传值的时候使用。

props的传递是单向的。
不要在子组件改变props的值。

props的基本用法：

在父组件中的data中定义值
在子组件中使用props声明要引用哪个值
父组件的template中要在子组件标签上绑定
在template模板中，要使用中划线写法；在script脚本中使用小驼峰

props的定义:

 props:["name","age","gender","fonds"]

静态props:

使用props传递数据包括静态和动态两种形式。

在组件中，使用选项props来声明需要从父级接受的数据，props的值可以是字符串数组,也可以是对象。

动态props:

有时候，传递数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v-bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。

传递类型:

如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind指令，传递的仅是字符串类型。

单项数据流：

当父组件的属性变化时，将传导给子组件，但是反过来不会。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。
不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

在两种情况下，我们很容易忍不住想去修改 prop 中数据：

Prop 作为初始值传入后，子组件想把它当作局部数据来用；
Prop 作为原始数据传入，由子组件处理成其它数据输出。

props 是一种单向数据绑定，组件永远不该改变自己的 props 的值，这点很重要。坚守这点的原因有很多。其一是，组件修改 props 会造成程序调试困难。如果一个值被传递进多个子组件，将很难定位这个值是在哪里被修改的。此外，修改 props 会造成组件重新渲染。所以，一个组件里突变的 props 会触发组件重新渲染，这可能会反过来再次触发 props 突变。

[slot-具名插槽]

什么叫具名插槽? 就是有名字的插槽。

为什么要用具名插槽?因为一个组件里可能有多个地方都不想写死，那就使用具名插槽。

命名语法:

<slot name= '名字'>默认值</slot>

使用语法:

(依赖template包裹，并且用v-s Lot指定插槽名字)

<template v-S Lot :插槽名>

要传递的内容

</ template>

简写语法: (把v-S Lot变成#)

<template #插槽名>

要传递的内容

</ template>

-- props 设置必传数据（数值不可为空），和属性默认值

用对象的方法定义单个数据：

props: {
        'name': {
            type: String,
            default: '刘德华'，
            required: true
        },
        'brith': {
            type: Number
        },
        'age': {
            type: Number
        }
    },