Vue中props的使用

props属性是父子组件之间的通信桥梁。何为父子组件？从子组件的观点来看，他的上一级实例或组件即为他的父组件。我们知道，处于安全考虑，组件模板里我们无法直接使用父组件的data数据，使用props这个属性可以将父组件的数据传给子组件。html lang="en">head>meta charset="UTF-8">title>prop

南北北南

5005人浏览 · 2018-06-14 16:54:40

南北北南 · 2018-06-14 16:54:40 发布

props属性是父子组件之间的通信桥梁。何为父子组件？从子组件的观点来看，他的上一级实例或组件即为他的父组件。我们知道，处于安全考虑，组件模板里我们无法直接使用父组件的data数据，使用props这个属性可以将父组件的数据传给子组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props的测试</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
    <Child message="父组件的message,我把他的内容重新定义了，但是父组件不会发生改变哦，因为没有绑定，哈哈！！"></Child>
    <hr />
    <input v-model="message"/>
    <Child :message='message'></Child>
</div>
<script>
    Vue.component('Child',{
        props: ['message'],
        template: '<span>{{ message }}</span>'
    });
    var vm = new Vue({
        el: '#props',
        data: {
            message: 'prop的测试'
        }
    });
</script>
</body>
</html>

代码效果图

在子组件中对父组件的数据进行处理。父组件的数据通过props传入子组件以后，在子组件中也可对数据进行相关处理，包括计算属性、data属性等。这样当子组件需要对数据进行处理时，避免了直接在父组件中对数据进行操作，而且由于props数据流单向性，在子组件中更改数据时，不会对父组件的数据产生影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props的测试</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
    <input v-model="message"/>
    <Child :message='message'></Child>
</div>
<script>
    Vue.component('Child',{
        props: ['message','todos'],
        template: '<span>{{ test }}</span>',
        computed: {
            test: function(){
                return this.message.trim().toUpperCase();
            }}
    });
    var vm = new Vue({
        el: '#props',
        data: {
            message: 'prop的测试'
        }
    });
</script>
</body>
</html>

代码效果图

prop的验证
我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组

Vue.component('example',{
    props: {
        propA: String,
        propB: [Number,String]
}
});

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^