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. 20.包含min函数的栈 Java

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 思路 借助辅助栈实现: 压栈时:若辅助栈为空,则将节点压入辅助栈.否则,当当前节点小于 ...

  2. 使用create-react-app创建项目（一）——端口配置

    在package.json文件中找到 "scripts",在start中添加"set PORT=8000" "scripts": { &qu ...

  3. <javaScript>谈谈JavaScript中的变量、指针和引用

    1.变量我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢?事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中 ...

  4. python调试工具remote_pdb

    介绍一个调试python代码的工具:remote_pdb https://pypi.org/project/remote-pdb/ 安装 pip install remote-pdb 使用 1,设置断 ...

  5. 10.service 详解

    10.service 详解 什么是service:Kubernetes中的Service 是一个抽象的概念,它定义了Pod的逻辑分组和一种可以访问它们的策略,这组Pod能被Service访问,使用YA ...

  6. [git]使用Idea创建一个git项目

    第一次使用git的方法,如建立的项目名叫:my-webapp   第一步:在远程gitlab上建立空白项目:my-webapp 第二步:在本地建立项目my-webapp,添加代码 第三步:创建一个本地 ...

  7. 利用beautifulsoup下载网页html代码中的css, js, img文件并保存

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...

  8. Jmeter性能测试工具的使用（Web性能测试）

    Jmeter性能测试工具的使用(Web性能测试) 1.下载 http://pan.baidu.com/s/1o7p18Ye 该软件不用安装,直接解压打开即可使用. 2.使用 这里就在win下进行,图形 ...

  9. Jedis的Publish/Subscribe功能的使用

    redis内置了发布/订阅功能,可以作为消息机制使用.所以这里主要使用Jedis的Publish/Subscribe功能. 1.使用Spring来配置Jedis连接池 <!-- pool配置 - ...

  10. MFS分布式文件系统

    一.MFS概述: MooseFS(moose 驼鹿)是一款网络分布式文件系统.它把数据分散在多台服务器上,但对于用户来讲,看到的只是一个源.MFS也像其他类unix文件系统一样,包含了层级结构(目录树 ...