Vue父组件给子组件传参数

• 别人在调用我们写的组件时，虽然要实现的结构一样，但如果别人想改一下显示的内容或者之类的，该怎么做呢；
• 这时候就要提到“传参数”这个词了，别人可以通过传不同的参数，来实现他们具体的结构；

传参之前的代码：

    <div id="box">
        <navbar>navbar>
        <navbar>navbar>
    div>
    <script>
        Vue.component("navbar",{
            template:`
            <div>
                <button>leftbutton>
                <span>navspan>
                <button>rightbutton>
            div>`
        })
 
        //根组件
        new Vue({
            el: "#box",
            data: {
 
            },
        })
    script>

结果：

调用了组件两次，但是因为组件是固定的，所以里面的内容显示的都是“nav”，那如果想显示不同的内容呢，就要“传参数”了；

传参之后的代码：

    <div id="box">
        <navbar myname="电影" :myright="false">navbar>
        <navbar myname="影院" >navbar>
    div>
    <script>
        Vue.component("navbar",{
            props:{
                myname:{
                    type:String,
                    default:""
                },
                myright:{
                    type:Boolean,
                    default:true
                }
            },//接受myname属性、属性验证、设置默认属性
            template:`
            <div>
                <button>leftbutton>
                <span>{{myname}}span>
                <button v-show="myright">rightbutton>
            div>`
        })
 
        //根组件
        new Vue({
            el: "#box",
            data: {
 
            },
        })
    script>

结果：

• 父组件把一个字符串传过去了，把一个布尔值传过去了； 
• 这个属性是放在子组件里面的，在调用的时候父组件传给子组件一个属性，然后子组件接收，使用。在代码中属性是：myname、myright；
• 后面的参数写的是属性值，调用者根据自己想显示的内容，在这里规定；
• 然后子组件接收这个属性，在props里，接收格式为：
• 将属性放在对象里接收，每个属性也是一个对象形式，每个属性里面要进行“属性验证”：type：类型值，也就是说明这个属性值的数据类型；还要设置默认值default；
• 进行数据验证的好处是：如果调用的时候属性值不小心写错类型了，或者用错了，比如我们想传一个布尔类型的，但是我们写成字符串类型的了，进行数据验证的话，如果我们调用写的属性值类型和下面属性定义的类型不一致，就会报错，如果没加数据验证，是不会报错的；
• 加默认值的好处是：如果有些属性不想加，可以设置默认值，不设置的话默认就会是undefined；
• 当然也可以不用设置默认值和数据验证，就接收属性，想下面这样用数组接收：

• props:["myname,myright"]
  

• 但是最完整的属性定义还是：不仅接收属性，还对属性进行校验，传一个对象过去， 还设置默认值； 
• 这就是父传子；父组件传一个属性给子组件，子组件接收，使用；
• 调用组件，传的参数不一样，结果也会不一样；
• 这个属性名不是固定的，可以自己起，但是要保证子组件接收和使用的时候要跟属性名保持一致；
• 看组件是谁的孩子，就把该组件放在谁的模板里去用；

有一点需要注意：

myright属性是控制右边那个按钮显示不显示的； 

看上面这个代码发现，myright前面加了“：”，原因是不加的话，后面双引号引起来的就是字符串，但是其实我们想传的是布尔值，所以要在前面加上“：”； 

加了“：”那等号后面就是js的代码，动态绑定，就传的是布尔值；不加的话就是直接当字符串用了；

只要在父组件里的div里，子组件是可以用父组件的状态：

• 凡是放在
  里面，定义子组件里是访问不了的。

子组件可以更改父组件的状态值吗：

• 父组件传给子组件的状态，子组件可以重新给它赋值，但是不要去修改，会造成数据流紊乱。
• 父组件传给子组件的属性，只有父组件可以重新传，但不允许子组件随意修改。
• 每个组件内部的状态，可以随意修改；

案例二：父传子loop属性，在标签上指定loop的值：

父组件：

子组件：接收这个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