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. JS 小脚本汇聚

    根据文件length展示文件大小 if (bytes === 0) return '0 B'; var k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', ...

  2. nginx部署前端项目

    1.在阿里云服务器上安装nginx,推荐使用yum安装 yum install -y nginx // 命令安装 nginx 服务器 2.配置nginx 安装完成后,进入 nginx 配置文件目录 一 ...

  3. 使用UltraISO制作linux系统安装u盘启动盘

    1.首先打开UltraISO软件,尽量下载最新版的,小编曾用某个旧版的UltraISO,制作的安装盘,不能不能识别磁盘,安装失败! 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后 ...

  4. mysql的启动问题

    用cmd启动MySQL   (net start mysql )时出现(发生系统错误 5.  拒绝访问)这样的错误是因为cmd 权限太低了需要提高cmd权限才行(即使管理员权限) 如下图cmd所示: ...

  5. UTC ISO 8601

    如果时间在零时区,并恰好与协调世界时相同,那么(不加空格地)在时间最后加一个大写字母Z.Z是相对协调世界时时间0偏移的代号.如下午2点30分5秒表示为14:30:05Z或143005Z:只表示小时和分 ...

  6. css3弹性盒子display：flex

    先看上面的代码,解释一下意思,看你能认识多少(后面有注释): .container { display: flex; //弹性布局 flex-direction: column; //容器内项目的排列 ...

  7. Python3+RobotFramewok 快速入门（二）

    1. 原理 首先解释一下RF的工作原理,官方文档介绍就不赘述了,笔者就框架架构做出一个更加具体的描述 测试套及测试用例集(Test Data即需要用户编写的脚本)通过RF特定的语法解析,然后知道用户要 ...

  8. 006-数据结构-树形结构-二叉树、二叉查找树、平衡二叉查找树-AVL树

    一.概述 树其实就是不包含回路的连通无向图.树其实是范畴更广的图的特例. 树是一种数据结构,它是由n(n>=1)个有限节点组成一个具有层次关系的集合. 1.1.树的特性: 每个结点有零个或多个子 ...

  9. SQL Server 新建 数据库关系图 时弹出警告提示此数据库没有有效所有者，因此无法安装数据库关系图支持对象。

    今天创建数据库关系图,发现提示此数据库没有有效所有者,因此无法安装数据库关系图支持对象.若要继续,请首先使用 数据库属性 对话框的文件页或 ALTER AUTHORIZAITION 语句将数据库所有者 ...

  10. JAVA 基础编程练习题12 【程序 12 计算奖金】

    12 [程序 12 计算奖金] 题目:企业发放的奖金根据利润提成.利润(I)低于或等于 10 万元时,奖金可提 10%:利润高于 10 万元, 低于 20 万元时,低于 10 万元的部分按 10%提成 ...