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. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  2. time模块/datetime模块/calendar模块

    time模块时间的表示形式时间戳:以整型或浮点型表示⼀个时间,该时间以秒为单位,这个时间是以1970年1⽉1⽇0时0分0秒开始计算的. 导入time import time 1.返回当前的时间戳 no ...

  3. docker&k8s-配置/常用命令

      kubectl delete deployment,ingress,svc demo-mml-jp-ylmopt-web-1 -n demo-mml  #删除预生产环境mml组ylmopt-web ...

  4. c++学习总结(一)------类结构学习

    基类的构造函数并没有被派生类继承 析构函数和拷贝赋值操作符同样也没有 类的设计者通过把成员函数声明为 const 以表明它们不修改类对象 把一个修改类数据成员的函数声明为 const 是非法的 (51 ...

  5. electron客户端开发

    如何新建一个 Electron 项目? electron快速入门笔记: https://www.jianshu.com/p/f134878af30f 然后自己新建一个 Electron 项目,在项目中 ...

  6. Spring Boot 项目集成 Alibaba Druid

    Druid 是一个非常好用的数据库连接池,但是他的好并不止体现在作为一个连接池加快数据访问性能上和连接管理上,他带有一个强大的监控工具:Druid Monitor.不仅可以监控数据源和慢查询,还可以监 ...

  7. 题解 P3378 【【模板】堆】

    Update 18.2.27----想当年我还用着C..... 看到题解里一堆用C++ STL库中的优先队列,身为C语言选手心里不是滋味 故手打一个优先队列献给坚守在C语言的选手 #include & ...

  8. sqlyog无操作一段时间后重新操作会卡死问题

    在使用 sqlyog 的过程中,遇到了这种情况:打开一个连接,进行了一些操作之后,过一段时间没有操作,然后再来操作会卡死一段时间,等一段时间后操作完成了继续进行其它操作,又很流畅了.但是过一段时间不操 ...

  9. xposed自定义参数

    java反射机制允许在不显式调用类及类方法的前提下,实现创建类对象.调用类方法等一系列操作. 目标函数为TestArray,其参数为我们自定义的Person类的数组. public class tes ...

  10. python自定义小工具:密码匿名化、毫秒时间显示、人类易读字节

    import base64 import time def timestamp2datems(timestamp): ''' 时间戳转为日期字串,精确到ms.单位s :param timestamp: ...