组件给子组件传参数"/>
Vue父组件给子组件传参数
- 别人在调用我们写的组件时，虽然要实现的结构一样，但如果别人想改一下显示的内容或者之类的，该怎么做呢；
- 这时候就要提到“传参数”这个词了，别人可以通过传不同的参数，来实现他们具体的结构；
传参之前的代码：
<body><div id="box"><navbar></navbar><navbar></navbar></div><script>Vueponent("navbar",{template:`<div><button>left</button><span>nav</span><button>right</button></div>`})//根组件new Vue({el: "#box",data: {},})</script>
</body>结果：
调用了组件两次，但是因为组件是固定的，所以里面的内容显示的都是“nav”，那如果想显示不同的内容呢，就要“传参数”了；
传参之后的代码：
<body><div id="box"><navbar myname="电影" :myright="false"></navbar><navbar myname="影院" ></navbar></div><script>Vueponent("navbar",{props:{myname:{type:String,default:""},myright:{type:Boolean,default:true}},//接受myname属性、属性验证、设置默认属性template:`<div><button>left</button><span>{{myname}}</span><button v-show="myright">right</button></div>`})//根组件new Vue({el: "#box",data: {},})</script>
</body>结果：
- 父组件把一个字符串传过去了，把一个布尔值传过去了；
- 这个属性是放在子组件里面的，在调用的时候父组件传给子组件一个属性，然后子组件接收，使用。在代码中属性是：myname、myright；
- 后面的参数写的是属性值，调用者根据自己想显示的内容，在这里规定；
- 然后子组件接收这个属性，在props里，接收格式为：
- 将属性放在对象里接收，每个属性也是一个对象形式，每个属性里面要进行“属性验证”：type：类型值，也就是说明这个属性值的数据类型；还要设置默认值default；
- 进行数据验证的好处是：如果调用的时候属性值不小心写错类型了，或者用错了，比如我们想传一个布尔类型的，但是我们写成字符串类型的了，进行数据验证的话，如果我们调用写的属性值类型和下面属性定义的类型不一致，就会报错，如果没加数据验证，是不会报错的；
- 加默认值的好处是：如果有些属性不想加，可以设置默认值，不设置的话默认就会是undefined；
- 当然也可以不用设置默认值和数据验证，就接收属性，想下面这样用数组接收：
-
props:["myname,myright"] - 但是最完整的属性定义还是：不仅接收属性，还对属性进行校验，传一个对象过去， 还设置默认值；
- 这就是父传子；父组件传一个属性给子组件，子组件接收，使用；
- 调用组件，传的参数不一样，结果也会不一样；
- 这个属性名不是固定的，可以自己起，但是要保证子组件接收和使用的时候要跟属性名保持一致；
- 看组件是谁的孩子，就把该组件放在谁的模板里去用；
有一点需要注意：
myright属性是控制右边那个按钮显示不显示的；
看上面这个代码发现，myright前面加了“：”，原因是不加的话，后面双引号引起来的就是字符串，但是其实我们想传的是布尔值，所以要在前面加上“：”；
加了“：”那等号后面就是js的代码，动态绑定，就传的是布尔值；不加的话就是直接当字符串用了；
只要在父组件里的div里，子组件是可以用父组件的状态：
- 凡是放在<div id="#box>里的东西，例如<navbar>/<button>/<sidebar>都可以访问到父组件的状态：isShow，但仅限于在<div id="#box>里面，定义子组件里是访问不了的。
子组件可以更改父组件的状态值吗：
- 父组件传给子组件的状态，子组件可以重新给它赋值，但是不要去修改，会造成数据流紊乱。
- 父组件传给子组件的属性，只有父组件可以重新传，但不允许子组件随意修改。
- 每个组件内部的状态，可以随意修改；
案例二：父传子loop属性，在标签上指定loop的值：
父组件：
<template><div><film-swiper :loop="false">//父传子loop属性，布尔值是变量要动态绑定<film-swiper-item>1111</film-swiper-item><film-swiper-item>2222</film-swiper-item><film-swiper-item>3333</film-swiper-item></film-swiper><film-header></film-header><!-- 路由容器 --><router-view></router-view></div>
</template>子组件：接收这个loop属性，并使用：
export default {
//接收loop属性props: {loop: {typeof: Boolean,default: true}},mounted () {new Swiper('.swiper', {// 循环模式选项loop: this.loop, //使用是this.loop// 如果需要分页器pagination: {el: '.swiper-pagination'}})}
}使用父组件传来的属性当做变量值是：this.loop
更多推荐
Vue父组件给子组件传参数
发布评论