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