通常,父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件收到后根据参数的不同来渲染不同的内容,或者执行操作。 这个正向传递数据的过程是通过props来实现的。

在组件中,子组件使用props来声明需要从父组件接受的数据。

但是父组件不能向子组件传递数据。

需要注意的是:

在 js中对象和数组是引用类型,指向同一个内存空间,所以 props 是对象和数组时,在子组件内改变是会影响父纽件的。

然后写了一个传递的demo

父组件中

<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld :message1="messageToHelloWorld"></HelloWorld>
</div>
</template> <script>
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
data() {
return {
messageToHelloWorld:'我是父组件向下传递的信息'
}
},
components: {
HelloWorld
}
}
</script>

子组件中

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Linkssss</h2>
<h3>{{ message1 }}</h3>
</div>
</template> <script>
export default {
name: 'HelloWorld',
props: ['message1'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

业务中,还比较常用组件验证:

vue中使用props传递参数的更多相关文章

  1. Vue 给子组件传递参数

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

  2. jsp中四种传递参数的方法

    jsp中四种传递参数的方法如下: 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="i ...

  3. linux中probe函数传递参数的寻找(下)

    点击打开链接 linux中probe函数传递参数的寻找(下) 通过追寻driver的脚步,我们有了努力的方向:只有找到spi_bus_type的填充device即可,下面该从device去打通,当两个 ...

  4. vue中把props中的值赋值给data

    vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...

  5. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

  6. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  7. (转)JSP中四种传递参数的方法:

    1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="index.jsp"?a= ...

  8. C++中三种传递参数方法的效率分析

    众所周知,在C++中有三种参数传递的方式: 按值传递(pass by value) #include <iostream> using namespace std; void swap(i ...

  9. Vue中this.$router.push参数获取

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...

随机推荐

  1. SpringCloud+Eureka+Feign+Ribbon的简化搭建流程和CRUD练习

    作者:个人微信公众号:程序猿的月光宝盒 环境:win10--idea2019--jdk8 1.搭建Eureka服务模块 1.1 新建eureka服务模块(Sping Initializr) 取名为eu ...

  2. Autofac 泛型依赖注入

    using Autofac;using Autofac.Extensions.DependencyInjection;using Hangfire;using Microsoft.AspNetCore ...

  3. 今天遇到的一些关于vsftp的坑!!!

    起因:最近在捣鼓Linux,配置vsftp的时候发现权限问题很坑,头疼了一天,发现了一点小问题 常见的身份验证方式: 1.使用系统的用户认证 例如vsftp这种软件,如果想建立一个可以登录FTP的用户 ...

  4. RN配置 java和python环境

    安装java JDK 不推荐更改安装路径. 安装时 不要有中文 会安装jdK和jre 1==>配置新建 JAVA_HOME 具体是[编辑]==>[新建] 然后添加下两句 JAVA_HOME ...

  5. javax.servlet.ServletException: Could not resolve view with name 'order/list' in servlet with name 'dispatcherServlet'

    javax.servlet.ServletException: Could not resolve view with name 'order/list' in servlet with name ' ...

  6. sed 使用正则表达式进行替换

    echo "111(222)333" | sed 's/(\(.*\))\(.*\)/\2\2\2/' \1 \2 表示匹配的第几个() 在进行模式匹配时,() 需要加转义符号\ ...

  7. Nginx:The Location Block Selection Algorithm

    Nginx:The Location Block Selection Algorithm,摘自NGINX:A PRACTICAL GUIDE TO HIGH PERFORMANCE Nginx配置文件 ...

  8. 【重要更新】Senparc.Weixin SDK v6.5 升级说明(支持 .NET Core 3.0 及分布式消息上下文)

    Senparc.Weixin SDK v6.5 开始支持 .NET Core 3.0,并将微信消息上下文进行了大幅度的重构,支持了使用分布式缓存存储上下文信息,这意味着在分布式系统中,现在 Senpa ...

  9. Java异常及异常处理

    如果某个方法不能按照正常的途径完成任务,就可以通过另一种路径退出方法.在这种情况下会抛出一个封装了错误信息的对象.此时,这个方法会立刻退出同时不返回任何值.另外,调用这个方法的其他代码也无法继续执行, ...

  10. springcloud vue.js 微服务分布式 前后分离 集成代码生成器 shiro权限 activiti工作流

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...