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

效果：

【vue】vue +element prop用法

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 = '姓名：西西';在子组件中修改父组件传递的值，会提示一个警告信息
    }
}

效果：

【vue】vue +element prop用法

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