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

最新推荐文章于 2024-07-01 17:09:45 发布

weixin_33871366

最新推荐文章于 2024-07-01 17:09:45 发布

阅读量1.5k

点赞数

文章标签： javascript 面试 ViewUI

原文链接：https://juejin.im/post/5add4787f265da0b736d3f1b

版权

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

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

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

父级组件:

<body>
    <div id="app">
    //组件调用
    <edit-pwd :is-show="isPwdShow"></edit-pwd>
    </div>
</body>
//实例化
 new Vue({
    el: '#app',
    data:function(){
       return{
            //对象
            isPwdShow: {
                isShow:false
            }
       }
    },
    methods:{
        
    }
复制代码

全局组件:

    //template模板
    <script id="edit_pwd_template" type="text/x-template">
    <el-dialog title="修改密码" :visible.sync="isShow.isShow">
        <el-form :model="pwdForm">
            <el-form-item label="密码" :label-width="formLabelWidth" placeholder="密码">
            <el-input v-model="pwdForm.pwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" placeholder="确认密码">
            <el-input v-model="pwdForm.surePwd"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isShow.isShow = false">取 消</el-button>
            <el-button type="primary" @click="isShow.isShow = false">确 定</el-button>
        </div>
    </el-dialog>
</script>

//密码修改
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

weixin_33871366

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue使用的props组件传值问题处理

Vue的父级组件与子组件,props传值,数据互动背景: 一个修改密码弹窗的全局组件,父组件控制该全局组件显示状态,子组件控制隐藏状态.ps: props的vue官方文档很重要!!!父级组件:<body> <div id="app"> //组件调用 <edit-pwd :is-show="isPwdShow"></edit-...
复制链接

扫一扫