1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过它来接收从 父组件 传进来的数据 ( 韩梅梅 ).

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <!-- 这里的 name 表示组件内部的 props name -->

        <myname name="韩梅梅"></myname>

    </div>

    <script>

        // component myname

        Vue.component('myname', {

            props: ['name'],

            template: '<h2>{{ name }}</h2>'

        })

        // Vue 实例

        var vApp = new Vue({

            el: "#app"

        })

    </script>

</body>

</html>

2. 上面这种形式是写死的, 一般不这样用, 而是通过 v-bind 将数据放到 $data 中, 这样可以 动态修改 / 更新 数据.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <family v-for="item in names" v-bind:name="item"></family>

    </div>

    <script>

        // component family

        Vue.component('family', {

            props: ['name'],

            template: '<h2>{{ name }}</h2>'

        })

        // Vue 实例

        var vApp = new Vue({

            el: "#app",

            data: {

                names: ["李雷","韩梅梅","李小雷"]

            }

        })

    </script>

</body>

</html>

怎样在 Vue 的 component 组件中使用 props ?的更多相关文章

  1. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  2. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. vue js 在组件中对数组使用splice() 遇到的坑。。。

    遇到的问题: 用el-dialog写了个子组件 要实现在子组件中增删数据 点击确定后把值返回给父组件 父组件在每次点开子组件时都会把自己的值传进去. //父组件传值 this.$refs.transf ...

  4. 怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢

    1.以前玩omi框架的时候,有Omi.get方法来获取实例, ...好久没玩了,忘了.反正很喜欢该方法.2.如今想在vue里面怎么能够快速获取到对应组件标签名的的实例呢?3.文档也看过,似乎脑海中没啥 ...

  5. Vue.js——component(组件)

    概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...

  6. Vue框架——页面组件中使用小组件

    小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...

  7. VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题

    碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==>

  8. vue 单文件组件中样式加载

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...

  9. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

随机推荐

  1. flask 第九篇 蓝图 Blueprint

    蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看 ...

  2. IDEA checkout Git 分支 弹出 Git Checkout Problem

    1. 本地分支切换的时候(例如A切到B),会弹出来Restore workspace on branch switching 对话框,如果选择是的话,在切换分支的时候,你在当前分支(A)所做的一些还未 ...

  3. 手把手教你设置MongoDB密码

    mongodb密码和传统数据如mysql等有些区别: mongodb的用户名和密码是基于特定数据库的,而不是基于整个系统的.所有所有数据库db都需要设置密码. 1. 查看所有数据库(在mongodb新 ...

  4. ps 证件照制作

    自己制作证件照,再通过印鸽等服务打印邮寄,个人感觉还是比较方便实惠. 使用ps的定义图案和填充功能(ps精简版) 定义图案 1,打开1寸照片 2,图像=>图像大小,可选去掉约束比例 1寸:2.5 ...

  5. Nginx之共享内存与slab机制

    1. 共享内存 在 Nginx 里,一块完整的共享内存以结构体 ngx_shm_zone_t 来封装,如下: typedef struct ngx_shm_zone_s ngx_shm_zone_t; ...

  6. （转载）完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三

    转自:http://blog.csdn.net/piggyxp/article/details/6922277 前 言 本系列里完成端口的代码在两年前就已经写好了,但是由于许久没有写东西了,不知该如何 ...

  7. nginx不间断服务平滑升级

    (1)备份旧的nginx和配置文件 cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/bak_nginx #备份旧版程序 cp /usr/loc ...

  8. 一百零七：CMS系统之权限和角色模型定义

    模型与权限关系映射表 class CMSPersmission: """ 权限管理映射 """ # 255的二进制方式来表示 1111 11 ...

  9. IDEA的热部署设置方式

    在这里只说一种简单的方式就是在idea中进行简单的设置就可以: 第一步:设置IDEA开启项目自动编译,进入设置找到Build,Execut, Deployment -> Compiler 勾选中 ...

  10. uni-app相关

    uni-app 中以下组件的高度是固定的,不可修改: 导航栏高度固定为 44pxtabBar 高度固定为 56px 状态栏比较特殊,是一个变量 .status_bar{ height: var(--s ...