vue中把props中的值赋值给data

2018年12月26日 14:37:11 木豆mudou 阅读数 3497
 
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。

父组件:

<template>
<div>
<navbar :ctype="ctype"></navbar>
</div>
</template> <script>
import navbar from '@/components/navbar'
export default {
components: {navbar},
data () {
return{
ctype:1
}
}
}
</script>

子组件:

<template>
<div>
<div>{{thistype}}</div>
</div>
</template> <script>
export default {
props:['ctype'],
computed: {
normalizedSize: function () {
return this.ctype.trim().toLowerCase()
}
},
data(){
return{
thistype:this.ctype
}
}
}
</script>

vue中把props中的值赋值给data的更多相关文章

  1. c语言中的结构体为值类型,当把一个结构体赋值给另一个结构体时,为值传递

    #include <stdio.h> int main() { struct person { int age; }; }; //值传递,将p1中所有成员变量的值赋值个p2中对应的成员变量 ...

  2. vue.js实战——props单向数据流

    Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...

  3. vue中直接修改props中的值并未给出警告,为啥?

    问:vue中直接修改props中的值并未给出警告,为啥? 答:如果props传入的值是引用类型,在子组件中改变其元素,不改变引用,那么不报错: 如果是基本类型,那么在修改时浏览器控制台会有报错信息. ...

  4. Vue props中Object和Array设置默认值

    Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Obj ...

  5. vue中子组件的created、mounted钩子中获取不到props中的值问题

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中: <template> <div> <head- ...

  6. vue中子组件的methods中获取到props中的值

    这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top>& ...

  7. Oracle中Clob类型处理解析:ORA-01461:仅可以插入LONG列的LONG值赋值

    感谢原作者:破剑冰-Oracle中Clob类型处理解析 上一篇分析:ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值 最近为Clob字段在插入数据时发现当字符的字节数(一个半角字符一 ...

  8. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

  9. 怎样在 Vue 的 component 组件中使用 props ?

    1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过 ...

随机推荐

  1. PHP和Memcached - Memcached的安装

    1.现有扩展对比   memcache memcached 实现方式 原生 局域libmemcached的类库,性能高 编程方式 面向过程.对象 面向对象 CAS命令 NO YES php7 NO Y ...

  2. Python之系统编程笔记

    概念 命令行工具. Shell 脚本.  系统管理 系统模块 sys   提供一组功能映射Python运行时的操作系统 os    提供跨平台可移植的操作系统编程接口   os.path 提供文件及目 ...

  3. EXTI中断开关点亮LED源码

    在KEY点亮LED源码的基础上 USER下新建EXIT文件夹,新建bsp_exit.c和bsp_exit.h,添加到工程中(魔术棒添加头文件所在文件夹) bsp_exit.h内容 #ifndef BS ...

  4. 关于InnoDB存储引擎 text blob 大字段的存储和优化

    最近在数据库优化的时候,看到一些表在设计上使用了text或者blob的字段,单表的存储空间已经达到了近100G,这种情况再去改变和优化就非常难了 一.简介 为了清楚大字段对性能的影响,我们必须要知道i ...

  5. Python开发【第七章】:异常处理

    一.异常处理 1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! #异常处理 list = [&qu ...

  6. asp.net core-2.在vs2017中创建asp.net core应用程序

    今天我们用vs2017创建一个asp.net core 的应用程序,打开vs2017 点击:文件—>项目,选择asp.net core web 应用程序 点击确定 红框内就昨天用控制台去创建的应 ...

  7. 组装技术的新进展 New advances in sequence assembly.

    组装技术的新进展 1.测序和组装 很难想象今天距离提出测序和组装已经有40年啦.我们回头来看一下这个问题. “With modern fast sequencing techniques and su ...

  8. 路由器开源系统openwrt配置页面定制

    1. 新建虚拟机,百度文库有一篇<使用VMware安装OpenWrt>,地址:http://wenku.baidu.com/link?url=NkvaQpTf2dR8FpYn7JD9A7- ...

  9. java 框架-分布式文件管理系统1FastDFS

    https://www.cnblogs.com/chiangchou/p/fastdfs.html

  10. Unity 自定义"=="操作符 [翻译来源blogs.unity3d,2014/05]

    主要内容来源 https://blogs.unity3d.com/cn/2014/05/16/custom-operator-should-we-keep-it/ 在我们代码里,如果有这样的代码: i ...