NO17--vue父子组件间单向数据流的解决办法

松鼠的窝

2018-05-24

关注关注

在上一篇中讲解了父子组件之间是如何传值的，如果子组件需要改变传过来的数据供自己使用，或者想在子组件中改变传过来的数据并同步到父组件，那么直接改肯定是不行的，如果你这么做了，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>

效果如下：