【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>

View Code

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>

View Code

 

效果：

 5.修改props數據

2種狀況： 一、prop 做爲初始值傳入後，子組件想把它看成局部數據來用 二、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 } }

 

 

 

 

 

 

 

 

 

 

參考資料：http://www.javashuo.com/article/p-mcrujzot-gx.html

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

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