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>

Logo

前往低代码交流专区

更多推荐