vue使用的props元件傳值問題處理

Mazin發表於2018-04-23
Vue元件

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

相關文章