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. DMA—直接存储器访问

    DMA 简介 DMA(Direct Memory Access)—直接存储器存取,是单片机的一个外设,它的主要功能是用来搬数据,但是不需要占用 CPU,即在传输数据的时候,CPU 可以干其他的事情,好 ...

  2. @Adaptive注解

    关于@Adaptive注解 引用dubbo官方文档的一段话: ​ Adaptive 可注解在类或方法上.当 Adaptive 注解在类上时,Dubbo 不会为该类生成代理类.注解在方法(接口方法)上时 ...

  3. scratch少儿编程第一季——05、移动还可以这样动

    各位小伙伴大家好: 上期我们学习了怎么控制方向和移动的程序块. 今天我们继续学习运动模块下的其他9个指令(程序块). 首先来看前面两个关于x坐标的程序块. 分别是将x坐标增加()单位,和将x坐标设定为 ...

  4. SAS学习笔记5 字符截取语句(index、compress、substr、scan函数)

    index:返回一个字符串中,某个特定字符或字符串的位置,找不到时返回0 compress:从一个字符串移除特定的字符 substr函数 字符替换与提取字符 substr(s, p, n)从变量s的第 ...

  5. jenkins 打安卓包 cpu使用过高处理操作

    登录两个控制台 打包开始后 在其中一台机器执行ps -ef |grep jenkins 找到执行打包的主进程复制pid 在另一个终端上执行 top -H -p pid 将最耗cpu的线程id转换为16 ...

  6. mysql存储emoji表情报错的处理方法【更改编码为utf8mb4】

    utf-8编码可能2个字节.3个字节.4个字节的字符,但是MySQL的utf8编码只支持3字节的数据,而移动端的表情数据是4个字节的字符.如果直接往采用utf-8编码的数据库中插入表情数据,Java程 ...

  7. hdu 6180贪心

    题意:有m个工程,一台机器在同一时间只能运行一个工程,告诉你每个工程的起始时间和结束时间,求出最少要多少个机器以及最小的机器总运行时间(机器开始了就不能停了,直到用完该台机器才停止). 题解:由于这里 ...

  8. (六)lucene之其他查询方式(组合查询,制定数字范围、指定字符串开头)

    本章使用的是lucene5.3.0 指定数字范围查询 package com.shyroke.test; import java.io.IOException; import java.nio.fil ...

  9. office2016激活码 最新各个版本 激活

    office2016专业版激活密钥 Microsoft Office 2016 Pro Plus Retail 零售版序列号密钥: BHXN7-MQB36-MTHQ4-8MHKV-CYT97 Micr ...

  10. C#如何调用C++(基础篇)

    闲暇之余,记一下笔记!记录一下c#如何调用C++的动态库(dll). 步骤: 一.创建一个C++类,例如: AddOperate.h extern _declspec(dllexport) int S ...