vue使用的props组件传值问题处理

Vue的父级组件与子组件,props传值,数据互动

背景: 一个修改密码弹窗的全局组件,父组件控制该全局组件显示状态,子组件控制隐藏状态.

ps: props的vue官方文档很重要!!!

父级组件:

    
"app">
    //组件调用
    "isPwdShow">
    

//实例化
 new Vue({
    el: '#app',
    data:function(){
       return{
            //对象
            isPwdShow: {
                isShow:false
            }
       }
    },
    methods:{
        
    }
复制代码

全局组件:

    //template模板
    

//密码修改
var editPwd = Vue.component('edit-pwd', {
    template: '#edit_pwd_template',
    //父级(对象)->单向
    props:['isShow'],
    data: function () {
        return {
            formLabelWidth: '120px',
            pwdForm: {
                pwd: '',
                surePwd: ''
            }
        
        }
    },
    methods: {
        
    }
});
    
复制代码

说明: vue的官方文档很重要 ,关键部分需要慢慢看↓

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。--vue官方文档

父级组件传props给子组件的时候, 使用对象整个传到给子组件, 子组件直接整个props来使用, 父级组件改变当前的传值内容, 子组件数据变动会变成显示;

子组件通过隐藏操作, 改变了父级的状态 (读一遍文档↑);

ps: 小白刚上手 9.9