vue父子组件之间的通信（父传子props）

3月

本文最后更新于2020年03月20日，已经过了1707天没有更新，若内容或图片失效，请留言反馈

父传子

前面的文章中提到了子组件是不能直接访问父组件或vue实列中的数据的（文章链接），那么父元素要怎样将数据传递给子组件呢

在组件中需要使用props属性来声明需要从父组件接受到的数据
props的值有两种写法

方式一：字符串数据，数组中的字符串就是传递时数据的名称
方式二：对象，可以设置数据传递时的类型，也可以设置默认值等

我们先来看一个最简单的props传递

text 代码:

<body>
    <div class="app">
        <!-- 2.通过v-bind将父组件中的数据(fmessage&farr)绑定到子组件的(cmessage&carr)上 -->
        <child :cmessage="fmessage" :carr="farr"></child>
    </div>
    
    <!-- 定义子组件的HTML模板 -->
    <template id="child">
        <div>
            <!-- 3.将props中的数据显示在子组件中 -->
            <p>{{cmessage}}</p>
            <div>{{carr}}</div>
        </div>
    </template>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        //子组件
        const child = {
            template:'#child',
            
            // 1.通过props定义从父组件中要接收的元素(数组语法)
            props:["cmessage","carr"]
        }
        
        //父组件
        const test = new Vue({
            el:".app",
            data:{
                fmessage:"this is father",
                farr:['a','b','c','d']
            },
            components:{
                child
            }
        })
    </script>
</body>

1.通过props定义从父组件中要接收的元素，代码中使用的时数组语法
2.在使用子组件时通过v-bind将父组件中的数据(fmessage&farr)绑定到子组件props中的数据(cmessage&carr)上
3.props中已绑定了父组件的数据，在渲染时会将其显示。

props数据验证（对象写法）

text 代码:

                             
            props:{
                cmessage:{
                    // type:规定cmessage的数据类型
                    type:String,
                    
                    // 默认值(在没有使用v-bind为cmessage绑定父组件数据时的默认数据)
                    default(){
                        return"this is child"
                    }
                },
                carr:{
                    type:Array,
                    default(){
                        return['childarr']
                    }
                }
            }

类型检查type

String
Number
Boolean
Array
Object
Date
Function
Symbol

额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数

text 代码:

function Person (firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName 
}

使用

text 代码:

props: {
  author: {
      type: Person
  }
}

来验证author的值是否是通过 new Person 创建的。

props的多种验证方式

text 代码:

props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,

// 多个可能的类型
    propB: [String, Number],

// 必填的字符串
    propC: {
      type: String,
      required: true
    },

// 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },

// 带有默认值的对象
    propE: {
      type: Object,
  // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },

// 自定义验证函数
    props: {
      validator: function (value) {
    // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}

props的驼峰标识

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

text 代码:

   Vue.component('blog-post', {
      // 在 JavaScript 中是 camelCase 的
      props: ['postTitle'],
      template: '<h3>{{ postTitle }}</h3>'
    })


<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢