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. Python中的变量、对象

    由于没时间系统学习下Python 只能见一个问题探究一个问题了 一.初级 - 对象 关于Python中的数据类型,今天重新认识了下.[参考] 首先,Python中,对象才有类型, 变量是没有类型的,它 ...

  2. QAbstractTableModel中的data()到底执行几遍？？？

    发现问题的过程  1.一个普通的继承 QAbstractTableModel 的类 class CurrencyModel : public QAbstractTableModel { public: ...

  3. 炉石兄弟 修复图腾师问题 by大神beebee102， 还有阴燃电鳗

    修复图腾师问题   beebee102 修复了先摇图腾再下图腾师的问题,另外加了阴燃电鳗的sim卡.在兄弟策略的模拟程序中测试了没问题,真机没有试过,麻烦吧友测试了回复一下.链接: [有效] http ...

  4. ansible-playbook的YAML语法学习

    YAML:可以将你打算对多机器的批量操作放到一个文件中,顺序执行,可以根据机器做到根据机器信息判断执行,其他命令执行结果判断执行. YAML有着严格的层级要求,稍微有个缩进问题就会无法运行,所以学习过 ...

  5. aop备忘

    https://www.iflym.com/index.php/code/use-java-develop-compile-annotated-aspectj-programe.htmlspringb ...

  6. 数据结构之链表（Linked list）

    1, 无序链表(Unordered linked list) 链表是有若干个数据节点依次链接成的数据结构,如下图所示,每一个数据节点包括包括数据和一个指向下一节点的指针.(python中的list就是 ...

  7. Nginx在Linux安装详解及问题处理

    Linux编译安装 1.nginx 依赖于prce库,要先安装pcre. #yum install prce pcre-devel 2.下载解压nginx #cd /usr/local/src/ #w ...

  8. Linux下四款常见远程工具比较

    摘要:Linux远程可不像Windows下那么方便,主要是连接的速度.显示的画质不能令人满意(延迟.撕裂).本文只是说一下我用过的四款远程工具.Anydesk官网:https://anydesk.co ...

  9. 利用phpStudy 探针 提权网站服务器

    声明: 本教程仅仅是演示管理员安全意识不强,存在弱口令情况.网站被非法入侵的演示,请勿用于恶意用途! 今天看到论坛有人发布了一个通过这phpStudy 探针 关键字搜索检索提权网址服务器,这个挺简单的 ...

  10. RabbitMQ学习之：（六）Direct Exchange （转贴+我的评论）

    From: http://lostechies.com/derekgreer/2012/04/02/rabbitmq-for-windows-direct-exchanges/ RabbitMQ fo ...