专栏首页热爱ITvue-cli工程 中组件注册 ,父组件向子组件传值

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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Supervisor重新加载配置启动新的进程

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

    双面人
  • 执行composer install遇到错误:

    执行composer install遇到错误:Your requirements could not be resolved to an installable...

    双面人
  • thinkphp5日期时间查询比较和whereTime使用方法

    双面人
  • OpenCV 直线拟合及应用

    [图片] OpenCV提供了7种(-1为用户定义)直线拟合方法,如下: CV_DIST_USER =-1, /* User defined dista...

    chaibubble
  • 腾讯云开发师资培训通知 | 云开发人才培养

    为积极响应国家及教育部的政策方针,以加强新工科专业建设及师资培养,促进新时代云计算领域的人才培养,联盟联合腾讯公司于2019年10月26日在北京召开“云开发师...

    腾讯高校合作
  • 微信域名检测API接口PHP源码

    从这里可以看出,检测域名是否被微信屏蔽,是这里的核心。但是在网上搜索和查看微信的文档,微信官方没有提供相关的查询方法。分享一个接口地址,分享给有需要的朋友。

    墨渊
  • 微信域名检测API接口PHP代码

    从这里可以看出,检测域名是否被微信屏蔽,是这里的核心。但是在网上搜索和查看微信的文档,微信官方没有提供相关的查询方法。分享一个接口地址,分享给有需要的朋友。

    Inkedus
  • 数据分析最有用的Top 50 Matplotlib图(带有完整的Python代码)(下)

    昨天我们跟大家分享了50个Matplotlib可视化 - 主图(带有完整的Python代码)上 ,详情链接请戳:50个Matplotlib可视化 - 主图(带...

    Datawhale
  • IP138开放查询接口(公测版),json调用示例

    世纪访客
  • 支持向量机原理(四)SMO算法原理

      在SVM的前三篇里,我们优化的目标函数最终都是一个关于$\alpha$向量的函数。而怎么极小化这个函数,求出对应的$\alpha$向量,进而求出分离超平面我...

    刘建平Pinard

扫码关注云+社区

领取腾讯云代金券