【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