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>

(adsbygoogle = window.adsbygoogle || []).push({});