单向数据流(子组件更新从父组件获取的数据,父组件(不)同步更新)

父组件传递给子组件

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
解决方法:

一.Prop 作为初始值传入后,子组件想把它当作局部数据来用,不影响父组件的数据,;(父组件传递过来的数据作为子组件的局部参数,可以任意修改,但是不会影响父组件的参数)

方法一




    
    单向数据流
    




    

二.Prop 作为原始数据传入,由子组件处理成其它数据输出。(如果子组件想修改数据,也同步更新到父组件)

  方法:
    1.使用.sync,它需要显式地触发一个更新事件:this.$emit('update:foo', newValue)
      子组件更新时,父组件的数据也会更新,父组件数据更新时,子组件也会更新



    
    从父组件获取的数据,修改子组件的数据,父组件也更新同步
    




    
关键代码: this.$emit('update:msg', "alice")
方法2:可以将父组件封装成一个对象,然后在子组件中修改对象的属性(常用)



    
    从父组件获取的数据,修改子组件的数据,父组件也更新同步
    




    
关键代码: user:{//把父组件的数据封装成一个对象,在子组件中修改对象的属性 name:'lulu', age:20 }

父组件的数据:{{user.age}}

你可能感兴趣的:(单向数据流(子组件更新从父组件获取的数据,父组件(不)同步更新))