父子组件通信——父组件向子组件传递数据

引入vue.js

<script src="vue.js"></script>

引用组件显示

<div id="app">
  <!-- v-bind不支持驼峰标识 -->
  <cpn :pmovies="movies" :pmessage='message'></cpn>
</div>

template模板

<template id="cpn">
    <!-- vue模板只能有一个根对象,即用一个标签来包裹全部的元素 -->
    <div>
      <ul>
        <li v-for='item in pmovies'>{{item}}</li>
      </ul>
      <h2>{{pmessage}}</h2>
    </div>
  </template>

定义Vue实例

const app = new Vue({
    el: "#app",
    data: {
      movies: ["海贼王", "爱丽丝梦游仙境", "金刚"],
      message: '鲁滨逊漂流记'
    },
    components: {
      // cpn:cpn
      //增强写法
      cpn
    }
  })

Prop类型

1.props传入数组

const cpn = {
      template: "#cpn",
      props: ['pmovies', 'pmessage'],
    }

2.props传入对象，并且可声明对象类型

const cpn = {
      template: "#cpn",
       props: {
        pmovies: Array,
        pmessage: String,
      },
    }
``` 
### 3.更详细写法(Prop 验证)

const cpn = {
template: “#cpn”,
// 提供默认值以及必传值required
props: {
//类型是对象或数组时，默认值必须是函数
pmovies: {
type: Array,
default () {
return []
}
},
pmessage: {
typs: String,
default: “默认显示字”,
required: true
},
},
}

```

结果

Tags: vue

← javascript三种常见高阶函数的使用父子组件通信——子传父 →

赏

使用支付宝打赏

使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章