vue中的props

StuProps.vue:

App.vue:

    

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 中数据：

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

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

[slot-具名插槽]

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

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

命名语法:

默认值

使用语法:

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