vue中的props用法

vue中的props

Props命名格式：

vue官网中表示：

​ 如果一个 prop 的名字很长，应使用 camelCase（驼峰命名法） 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case（短横线分割式） 形式

prpos特点：

1.单项数据流

这意味着你不应该在子组件中去更改一个 prop

​ 这个是什么意思呢，是这样的，欸，我拿到值了，就不能直接去修改props 里面的值，

这个问题怎么解决呢，就是在data重新定义一个值去接收这个值

官网文档：

export default {
  props: ['initialCounter'],
  data() {
    return {
      // 计数器只是将 this.initialCounter 作为初始值
      // 像下面这样做就使 prop 和后续更新无关了
      counter: this.initialCounter
    }
  }
}

2.两种方式

在props中 可以使用两种格式接收值，一个是数组的形式，一种是对象的形式

这个是使用数组的方式接收

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjuWv86N-1682557114102)(C:\Users\dell\Desktop\微信截图_20230426201254.png)]

这个是使用数组的方式接收

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hfSAv1uS-1682557114103)(C:\Users\dell\Desktop\微信截图_20230426201417.png)]

3.限制数值类型，默认值，必填项，

在使用 对象方式接收值的时候，可以设置限制数值类型，默认值，必填项，

​ 父组件：

<template>
  <div id="app">
    <hello-world :age='age' :sex='sex' :name='name'></hello-world>
  </div>
</template>

<script>
import HelloWorld from './my-son.vue'

export default {
  data() {
    return {
      name: '张三',
      age: 18，
      sex：'男'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <h1>{{name}}</h1>
  <h1>{{sex}}</h1>
  <h1>{{age}}</h1>
</template>

<script>
export default {
  props: {
    name: {
      type: String, //设置数值类型是字符串
      required: true //设置name 为必填项
    },
    sex: {
      type: String,
      default: '男' //设置 sex 的默认值是 男 当sex没有是会默认为男
    },
    age: String
  }
}
</script>

基本使用方法：父组件向子组件传值

我在刚开始学习的时候，总是习惯，在父组件的标签里面写v-bind。其实应该在子组件里使用v-bind

传静态的值

父组件：

<template>
  <div id="app">
    <hello-world msg="'你好'"></hello-world>
  </div>
</template>

<script>
    
import HelloWorld from './my-son.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <h1>{{msg}}</h1>
</template>

<script>
export default {
  props: ['msg']
}
</script>

传动态值

相应地，还有使用 v-bind 或缩写 : 来进行动态绑定的 props：

父组件

<template>
  <div id="app">
     <!-- 根据一个变量的值动态传入 -->
    <hello-world :msg="title"></hello-world>
  </div>
</template>

<script>
import HelloWorld from './my-son.vue'

export default {
  data(){
    return{
      title:'你好'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

这里子组件没有改动

传递不同值类型：

上面的案例都是传入的字符串类的值，其实props可以传 任何的值

Number （数字类型）

<hello-world msg="42"></hello-world>

Boolean（布尔类型）

父组件：

<template>
  <div id="app">
    <hello-world :msg="title"></hello-world>
  </div>
</template>

<script>
import HelloWorld from './my-son.vue'

export default {
  data() {
    return {
      title: false  //我们使用动态传值的方式 ，传递一个布尔值过去
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <h1>{{msg}}</h1>
	<!-- 这里使用全等进行判断，如拿到的值是布尔值的true这个div就会展示出来 -->
  <div v-if=" msg === true">true展示</div>
	<!-- 但是这里拿到的值是 布尔值的false 所以不会展示出来 -->
</template>

<script>
export default {
  props: ['msg']
}
</script>

Array（数组类型）

父组件：

<template>
  <div id="app">
    <hello-world :msg="title"></hello-world>
  </div>
</template>

<script>
import HelloWorld from './my-son.vue'

export default {
  data() {
    return {
        //使用动态传值的方式，定义一个数组
      title: ['第一项', '第二项', '第三项']
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <h1>{{msg}}</h1>
  <ul>
    <li v-for="item in msg" key="item">{{item}}</li>
  </ul>
</template>

<script>
export default {
  props: ['msg']
}
</script>

Object（对象类型）

父组件：

<template>
  <div id="app">
    <hello-world :msg="title"></hello-world>
  </div>
</template>

<script>
import HelloWorld from './my-son.vue'

export default {
  data() {
    return {
      title:{
        name:'张三',
        age:18
      }
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件：

<template>
  <h1>{{msg}}</h1>
  <h1>{{msg.name}}</h1>
  <h1>{{msg.age}}</h1>
</template>

<script>
export default {
  props: ['msg']
}
</script>

return {
title:{
name:‘张三’,
age:18
}
}
},
components: {
HelloWorld
}
}

**子组件：**

```vue
<template>
  <h1>{{msg}}</h1>
  <h1>{{msg.name}}</h1>
  <h1>{{msg.age}}</h1>
</template>

<script>
export default {
  props: ['msg']
}
</script>