01父传子

最新推荐文章于 2024-05-30 15:26:53 发布

Mrs彬

最新推荐文章于 2024-05-30 15:26:53 发布

阅读量335

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/bin_2659017380/article/details/117263294

版权

本文探讨了Vue.js中父组件如何单向数据流传递数据给子组件，并详细解析了不同情况下数据变化的影响。主要内容包括：1) 父传子的基本原理和默认行为；2) 使用props进行数据接收时的注意事项；3) 如何通过props验证确保数据类型正确、必传参数等。此外，还介绍了如何实现双向数据绑定和避免报错的情况。

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

一、父传子
1、父传子是单向数据流
2、默认：父变，子变；子变，父不变，还要报错。 80%
3、子组件定义了一个属性，接收了父组件传递过来的值，这时候，父变，子不变；子变，父不变，但是不报错。
4、如果想要实现父变，子变;子变，父变，还不报错，那么就传递一个json数据过来。20%

child.vue
<template>
    <div class="child">
        <h5>子组件</h5>
       父组件的传过来的值： <input type="text" v-model="info"><br/>
       <!-- 子组件不能修改父组件的值，会报错 -->

       父组件的传过来的值： <input type="text" v-model="a" @change='changV1'><br/>

        父组件的传过来的值： <input type="text" v-model="info2.msg" @change="changV"><br/>
    </div>
</template>
<script>
    export default {
   
        //子组件通过props接受
        // info  父变，子变   子变，父不变，会报错
        // info1  将父组件的info1赋值给子组件的a，不会报错，子变，父不变
        // info2  将父组件的json直接绑定到子组件上，子变，父变（因为父组件传过来的是json）
        props:[

最低0.47元/天解锁文章