vue-cli工程 中组件注册 ，父组件向子组件传值

**

首先我们准备一个父组件模板
————-

**

    1
    2
    3
    4
    5
    6

<template>
<template>
  <div id=”app”>

    <!– 使用子组件 –>
    <!– 向子组件传值 需要在父组件中使用v-bind绑定一个名字 :outdata=”arr” 其中outdata这个名字是
        你子组件中props属性接收数据时的名字 –>
    <three :outdata=”arr”/>
  </div>
</template>
<script>

//引入子组件
import three from ‘./components/three’

export default {

//全局注册组件
  components:{

    three
  },
  data(){

    return {

      arr:[1,2,3,4,5] //父组件的数据
    }
  }
}
</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

子组件模板

<template>
    <div class=”three”>
        <h1>我是子组件</h1>

        <!– 它俩都能得到 –>
        {
{ items }}
        <br>
        {
{ outdata }}
    </div>
</template>

<script>
    export default {

        // 第一种写法：不推荐
        // props:[‘outdata’],
        // 第二种写法 推荐 需要注意传值 和传引用的default 写法区别
        // js中 object 和 Array 属于传引用 ,default 需要返回一个工厂函数的写法
        // 传值：Number  String Boolean 类型 default: 0||”||false 写法
        // 当props中的数据类型验证失败时，在开发版本下 在控制台会报警告
        props:{

            outdata:{

                type:Array,//类型也可以是多样 比如：String||Number
                required:true,
                default:()=>{

                    return [];
                }
            }
        },
        data(){

            return{

              items:this.outdata,// 也可以在这里接收
            }
        }
    }
</script>