zoukankan      html  css  js  c++  java
  • 父子组件间单向数据流的解决办法

    我们知道父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告。所以,解决的方式在以下我会来讲一讲。

    先创建项目并运行

    vue init webpack-simple template
    cd template
    npm i
    npm run dev

    一、 子组件需要改变传过来的数据供自己使用
    1. 定义一个局部变量,并用 props 的值来初始化它

    在 App.vue 中

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
            <hr>
            <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
            <Hello :message="msg"></Hello>
        </div>
    </template>
    
    <script>
    // 引入 Hello 组件
    import Hello from './assets/components/Hello.vue'
    export default {
      data(){
        return {
          msg:'父组件',
          name:'tom',
          age:'22',
          user:{
            id:1234,
            userName:'Jack'
          }
        }
      },
      // 注册 Hello 组件
      components:{
        Hello
      }
    }
    </script>
    

    在 Hello.vue 中

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据: {{msg}}</h4>
            <button @click="change">改变父组件的数据</button>
        </div>
    </template>
    
    <script>
    export default {
        // 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
        props:['message'],
        data(){
            return {
                // 定义一个局部变量,并用 props 的值来初始化它
                msg:this.message
            }
        },
        methods:{
            // 定义一个方法,来触发改变父组件的数据
            change(){
                this.msg = '我改变了父组件的数据'
            }
        }
    }
    </script>
    

    效果图:


     
    子组件改变父组件的数据
    2. 定义一个计算属性,处理 prop 的值并返回:

    在 Hello.vue 中改动

    <script>
    export default {
        // 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
        props:['message'],
        data(){
            return {
                // 定义一个局部变量,并用 props 的值来初始化它
                msg:this.message
            }
        },
        computed:{
            // 定义一个方法,来触发改变父组件的数据
            change(){
                return this.msg = '我改变了父组件的数据'
            }
        }
    }
    </script>
    

    当页面渲染成功自动完成计算


     
     
    二、子组件中改变传过来的数据并同步到父组件
    1. 使用 sync 修饰符,它会被扩展为一个自动更新父组件属性的 v-on 监听器

    在 App.vue 中把 template 的内容更改为

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据:{{msg}}</h4>
            <hr>
            <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
            <!-- .sync 会被扩展为一个自动更新父组件属性的 v-on 监听器 -->
            <Hello :message.sync="msg"></Hello>
        </div>
    </template>
    

    在 Hello.vue 中更改为

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据: {{message}}</h4>
            <button @click="change">改变父组件的数据</button>
        </div>
    </template>
    
    <script>
    export default {
        // 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
        props:['message'],
        methods:{
            change(){
                // 使用 .sync 时,需要显式的触发一个更新事件
                // update 为固定写法,后面跟将要被改变的数据对象,接着写替换的数据
                this.$emit('update:message','我改变了父组件的数据')
            }
        }
    }
    </script>
    

    效果为:


     
     
    2. 可以将父组件中的数据包装成对象或数组,然后在子组件中修改对象的属性

    在 App.vue 中

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据:{{user.userName}}</h4>
            <hr>
            <!-- 2. 在调用子组件时,绑定想要获取的父组件中的数据 -->
            <Hello :user="user"></Hello>
        </div>
    </template>
    
    <script>
    // 引入 Hello 组件
    import Hello from './assets/components/Hello.vue'
    export default {
      data(){
        return {
          // 1. 在父组件中把数据写成对象的形式
          user:{
            id:1234,
            userName:'Jack'
          }
        }
      },
      // 注册 Hello 组件
      components:{
        Hello
      }
    }
    </script>
    

    在 Hello.vue 中

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 5. 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据: {{user.userName}}</h4>
            <button @click="change">改变父组件的数据</button>
        </div>
    </template>
    
    <script>
    export default {
        // 3. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
        props:['message','user'],
        methods:{
            // 4.直接修改 user 对象中的数据
            change(){
                this.user.userName = 'Tom'
            }
        }
    }
    </script>
    

    效果如下:


     
     

    我们是不允许直接修改父组件传过来的数据或对象的,而这种方法更改的是对象中的属性,因为对象是引用类型,指向同一内存空间,所以可以实现此效果。推荐使用该方式

    好了,如果有什么讲的不好不明白的,欢迎留言交流。
  • 相关阅读:
    Archlinux笔记本安装手记
    linux下activemq安装与配置activemq-5.15.2
    在 CentOS7 上安装 Zookeeper-3.4.9 服务
    VMware虚拟化kvm安装部署总结
    打印机故障总结
    fluentd安装和配置,收集docker日志
    使用Python和AWK两种方式实现文本处理的长拼接案例
    MySQL数据库使用xtrabackup备份实现小例子
    shell脚本实现ftp上传下载文件
    Linux系统中创建大文件,并作为文件系统使用
  • 原文地址:https://www.cnblogs.com/wu971023-/p/8835266.html
Copyright © 2011-2022 走看看