props接收父级元素的属性

最新推荐文章于 2024-06-05 15:03:13 发布

Gbing1228

最新推荐文章于 2024-06-05 15:03:13 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Gbing1228/article/details/90711839

版权

本文探讨了Vue中props的使用，指出props用于接收父组件传递的数据，可以通过v-bind进行动态绑定。同时强调，若要传递复杂数据类型，如数字、布尔值、数组和对象，需注意使用正确的绑定方式。此外，还提到了组件间通信的三种类型，并提到在组件设计时进行数据验证的重要性。最后，展示了如何使用v-model在自定义组件中实现数据双向绑定及其要求。

摘要由CSDN通过智能技术生成

props的值可以是两种，一种是字符串数组，一种是对象；
props中声明的数据是来自父级，而data中的数据是组件本身的数据，作用域是组件本身，这两种数据都可以在模板template以及计算属性的方法中使用。

要使用来自父级的动态数据时，需要使用v-bind来动态绑定props。

<div id="app" >
    <input type="tetx" v-model.lazy="parentMessage" placeholder="please input message ">
    <my-component :message="parentMessage"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('my-component',{
        props:['message'],
        template:'<div>hello,{
    {message}}</div>'
    });
    var app=new Vue({
        el:'#app',
        data:{
            parentMessage:''
        }
    })
</script>

以上代码示例v-model绑定了父级元素的pa