vue中的props

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}},

vue中的props相关推荐

vue中的props对象
vue中的props对象 1.props对象的定义 props其实是properties的缩写,props对象是用来定义属性的.props对象可以接受数组形式的参数又或者是对象形式的参数. 数组形式 ...
Vue中的 props 属性
1.什么是 props props 用于组件的传值,他的工作就是为了接受外面传过来的数据,是一个配置项,与data.el.ref 是一个级别的. 2.props 的使用 --1 先准备子组件 Tex ...
vue中修改props传进来的值
总所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候. 前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但 ...
Vue中使用props
文章目录简单接收接收,且限制类型接收,且限制类型.限制必要性.指定默认值可以在Vue官网访问props. 组件使用props接收从外部传递过来的数据. 组件通过props接收数据,props有 ...
vue中把props中的值赋值给data
父组件 <messageForm @createMsgCallback="addCreateMsg" :name="sendForm.name">& ...
「后端小伙伴来学前端了」关于 Vue中的 props
校园的晚霞前言学vue必须要会的就是组件这玩意啦,不然可能就约等于白学. 我自己前期完成老师布置的任务,不瞒你说,交上去,直接被骂,原因就是我一个组件没抽
「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
校园的云前言废话: 上篇文章写了关于Vue 中的 props
Vue中props用法
在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...

vue中的props

props的作用：

props的基本用法：

props的定义:

静态props:

动态props:

单项数据流：

[slot-具名插槽]

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

vue中的props相关推荐

最新文章

热门文章