【vue】vue +element prop用法

簡單demo

父組件：index.vue

<template>
  <div class="app-container">
      <vue-props-demo :user-name="name" :age="age" :sex="sex"></vue-props-demo>
  </div>
</template>
<script>
    import vuePropsDemo from '@/views/skill/propsDemo'
    export default {
        name:'skill',
        data() {
            return {
                name:'姓名：東東',
                age:'年齡：10',
                sex:'性別：男',
            }

        },
        components:{
            'vue-props-demo': vuePropsDemo,
        }
    }
</script>

子組件propsDemo.vue

<template>
    <div class="app-container">
        <p v-text="userName"></p>
        <p v-text="name"></p>
        <p v-text="sex"></p>
        <p v-text="age"></p>
    </div>
</template>
<script>
    export default {
        name:'vuePropsDemo',
        props:['userName','sex','age'],//props定義
        created(){
        },
        methods: {
            getProps(){
            }
        }
    }
</script>

效果：

 

1.props是什么：（簡單的說用於父子組件通信，父傳遞給子數據）

　　①組件實例的作用域是孤立的，可以使用props在父子組件之間傳遞數據，在子組件中定義props，在父中通過props向子傳遞數據

　　②props是單向綁定的，意思是說父組件數據發生變化時，子組件也會發生變化，

　　當在子組件中更改數據時，父組件不會發生變化，並且在控制台會發現警告信息，原因是：JS中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態

father.vue

created(){
    this.getProps();
},
methods:{
    getProps(){
        console.log('父組件：',this.name);
    }
}

子組件propsDemo.vue

created(){
    this.getProps();
},
methods: {
    getProps(){
        this.userName = '姓名：西西';
        console.log('子組件：',this.userName);//子組件中可以這樣獲取父組件傳遞的數據
        // this.userName = '姓名：西西';在子組件中修改父組件傳遞的值，會提示一個警告信息
    }
}

 

效果：

 

2.props定義：

子組件：props:['userName','sex','age'],//多個單詞構成時建議使用駝峰命名

父組件：:user-name="name"   等價於   v-bind:user-name="name"

3.props分類：靜態和動態

靜態：user-name="姓名：東東"；

動態：:user-name="name"

4.props驗證

index.vue

<template>
  <div class="app-container">
      <!-- <vue-props-demo :user-name="name" v-bind:age="age+1" :sex="sex"></vue-props-demo> -->
      <vue-props-demo
        :msg-null="1+1"
        :msg-string="msgString"
        :msg-obj="msgObj"
        :msg-validate="msgValidate"
        :msg-prop= "msgProp"
        >
        </vue-props-demo>

  </div>
</template>
<script>
    import vuePropsDemo from '@/views/skill/propsDemo'
    export default {
        name:'skill',
        data() {
            return {
                name:'姓名：東東',
                age:10,
                sex:'性別：男',
                msgString:'String類型，必須是定義過的，可以是空字符串"",</br>如果非String類型，控制台會警告，例定義：msgString:10',
                msgObj:{
                    name:'小紅 ',
                    age:20
                },
                msgProp:12,
                msgValidate:90,
            }

        },
        components:{
            'vue-props-demo': vuePropsDemo,
        },
        created(){
            this.getProps();
        },
        methods:{
            getProps(){
                console.log('父組件：',this.name);
            }
        }
    }
</script>

propsDemo.vue

<template>
    <div class="app-container">
        <!-- <p v-text="userName"></p>
        <p v-text="sex"></p>
        <p v-text="age"></p> -->
        <div class="title">props驗證</div>
        <el-form  class="wrap-form" label-width="180px">
            <el-form-item label="null類型props：">
                <span v-text="msgNull"></span>
            </el-form-item>
            <el-form-item label="string類型props：">
                <span v-html="msgString"></span>
            </el-form-item>
            <el-form-item label="number類型props：">
                <span v-text="msgNumber"></span>
            </el-form-item>
            <el-form-item label="obj類型props：">
                <span v-text="msgObj.name"></span>
                <span v-text="msgObj.age"></span>
            </el-form-item>
            <el-form-item label="自定義驗證props：">
                <span v-text="msgValidate"></span>
            </el-form-item>
            <el-form-item label="多種類型props：">
                <span v-text="msgProp"></span>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name:'vuePropsDemo',
        //props:['userName','sex','age'],//props定義
        props:{
            msgNull:null,//基礎類型檢測（'null'）意思是任何類型都可以
            msgProp: [String, Number], // 多種類型
            msgString:{//String類型，必須是定義過的，可以是空字符串""
                type:String,
                required:true,
            },
            msgNumber:{//Number類型，默認值100
                type:Number,
                default:100
            },
            msgObj:{//Object對象，返回值必須是js對象
                type:Object,
                default:function(){
                    return {
                        name:'lisa',
                        age:18
                    }

                }
            },
            msgValidate:{//自定義驗證，必須是Number類型，驗證規則：大於10,如果不滿足條件，控制台會拋出警告
                type:Number,
                validator: function(val){
                    return val > 10;
                }
            },

        },
        data() {
            return {
            }
        },
        created(){},
        methods: {}
    }
</script>
<style>
    .title{
        font-size: 14px;
        padding-left: 20px;
        color: #333;
        line-height: 34px;
        background-color: #F5F5F5;
    }
</style>

 

效果：

 5.修改props數據

2種情況：
    1、prop 作為初始值傳入后，子組件想把它當作局部數據來用

    2、prop 作為初始值傳入，由子組件處理成其它數據輸出

index.vue

<vue-props-demo :child-msg="msg"></vue-props-demo>
父組件 <input v-model="msg">{{msg}}

propsDemo.vue

<el-form-item label="子組件props：">
    <input v-model="temp">
    {{temp}}
</el-form-item>

 

props:['childMsg'],
data() {
    return {
        temp:this.childMsg
    }
},
created(){},
methods: {},
watch:{
    childMsg(){
        this.temp = this.childMsg
    }
}

 

 

 

 

 

 

 

 

 

 

參考資料：https://www.cnblogs.com/xiaohuochai/p/7388866.html

　　　　　https://vuejs.org/v2/guide/components-props.html#ad

　　　　 https://www.cnblogs.com/zhuruiyu/p/6917852.html