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. A*算法解决15数码问题_Python实现

    1问题描述 数码问题常被用来演示如何在状态空间中生成动作序列.一个典型的例子是15数码问题,它是由放在一个4×4的16宫格棋盘中的15个数码(1-15)构成,棋盘中的一个单元是空的,它的邻接单元中的数 ...

  2. git与github建立仓库连接步骤（纯小白教程）

    一.先对git 进行用户设置 首先你得在网上下载git软件并且安装,一路默认安装就好了,然后就可以开始本地仓库的建立了.打开你安装好的git, 在开始菜单里面找到git文件夹里面的git bash端 ...

  3. 博客&git收藏

    阿里中间件团队博客 http://jm.taobao.orgkimmking https://blog.csdn.net/KimmKing/article/details/71517053 greys ...

  4. vuejs2从入门到精通与项目开发实战

    vuejs2从入门到精通:一.基础部分0.课件1.介绍2.vue实例3.模板语法4.计算属性和观察者5.Class与Style绑定6.条件渲染7.列表渲染8.事件处理9.表单输入绑定10.1.组件(1 ...

  5. Bootstrap4从入门到精通视频教程

    一.布局 0.课件1.Bootstrap介绍_栅格系统2.禁用响应式_响应式分界点 二.内容 3.排版_代码4.图片_图片框5.表格 三.公共样式 6.边框_浮动7.颜色_Display显示属性8.文 ...

  6. 数据库 | Redis 缓存雪崩解决方案

    Redis 雪崩 缓存层承载着大量的请求,有效保护了存储层.但是如果由于缓存大量失效或者缓存整体不能提供服务,导致大量的请求到达存储层,会使存储层负载增加,这就是缓存雪崩的场景. 解决缓存雪崩,可以从 ...

  7. MYSQL通过循环向数据库中插入数据

    BEGINdeclare i int default 305;declare a char(255);REPEATset a=concat("测试机构00",cast(i as c ...

  8. ScreenShot 截图工具类

    import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import an ...

  9. C# 后台服务 web.config 中 项“ConnectionString”已添加。问题

    是自己在一网站下建了虚拟目录.原本网站为空,后来自己改了路径,有了默认配置很久后打开原本ok的虚拟目录,坑爹了.杯具了.代码:ConfigurationManager.ConnectionString ...

  10. Java各种反射性能对比

    对各种方法实现get方法的性能进行了一个测试. 总共有5个测试,,每个测试都是执行1亿次 1. 直接通过Java的get方法 2.通过高性能的ReflectAsm库进行测试 3.通过Java Clas ...