Vue父组件给子组件传参数

news2024/11/19 7:40:38

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

传参之前的代码：

<body>
    <div id="box">
        <navbar></navbar>
        <navbar></navbar>
    </div>
    <script>
        Vue.component("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>
        Vue.component("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"]
```
但是最完整的属性定义还是：不仅接收属性，还对属性进行校验，传一个对象过去，还设置默认值；
这就是父传子；父组件传一个属性给子组件，子组件接收，使用；
调用组件，传的参数不一样，结果也会不一样；
这个属性名不是固定的，可以自己起，但是要保证子组件接收和使用的时候要跟属性名保持一致；
看组件是谁的孩子，就把该组件放在谁的模板里去用；