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

**

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

**

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

子组件模板

<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>
--------------------- 
作者：素燃 
来源：CSDN 
原文：https://blog.csdn.net/qq_36407748/article/details/80149346 
版权声明：本文为博主原创文章，转载请附上博文链接！