vue中把props中的值赋值给data
vue中把props中的值赋值给data
父组件:
<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的更多相关文章
- c语言中的结构体为值类型,当把一个结构体赋值给另一个结构体时,为值传递
#include <stdio.h> int main() { struct person { int age; }; }; //值传递,将p1中所有成员变量的值赋值个p2中对应的成员变量 ...
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- vue中直接修改props中的值并未给出警告,为啥?
问:vue中直接修改props中的值并未给出警告,为啥? 答:如果props传入的值是引用类型,在子组件中改变其元素,不改变引用,那么不报错: 如果是基本类型,那么在修改时浏览器控制台会有报错信息. ...
- Vue props中Object和Array设置默认值
Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Obj ...
- vue中子组件的created、mounted钩子中获取不到props中的值问题
父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中: <template> <div> <head- ...
- vue中子组件的methods中获取到props中的值
这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top>& ...
- Oracle中Clob类型处理解析:ORA-01461:仅可以插入LONG列的LONG值赋值
感谢原作者:破剑冰-Oracle中Clob类型处理解析 上一篇分析:ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值 最近为Clob字段在插入数据时发现当字符的字节数(一个半角字符一 ...
- vue 路由meta作用及在路由中添加props作用
vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...
- 怎样在 Vue 的 component 组件中使用 props ?
1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过 ...
随机推荐
- python第一个浏览器的自动执行程序
1.目标:简单点,百度搜索“美丽的程序员” 2.操作方法: a.python已经安装完成 b.安装PIP:在windows的cmd窗口下输入easy_install pip c.安装sele ...
- scratch少儿编程第一季——07、人要衣装佛靠金装——外观模块
各位小伙伴大家好: 上期我们学习了如何设置背景,和设计一个小项目总结了动作模块. 本期开始我们学习外观模块下的指令. 首先我们来看看前面两个指令 第一个指令是在角色对象上出现一个对话框,显示角色所说的 ...
- 日志(log4j)
log4j测试代码如下: package com.learn.test; import org.apache.log4j.Logger; public class Test { public stat ...
- 【vue】过滤器的使用
一.在methods中使用过滤器------全局定义的过滤器 //main.js中 import Vue from 'vue' Vue.filter('testFilter1',function(va ...
- spring.factories配置文件的工厂模式
在springboot的各个依赖包下,我们经常看到META-INF/spring.factories这个文件.spring.factories文件的内容基本上都是这样的格式: # Initialize ...
- flex应用实例
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ElasticSearch做实时OLAP框架~实时搜索、统计和OLAP需求,甚至可以作为NOSQL来使用(转)
使用ElasticSearch作为大数据平台的实时OLAP框架 – lxw的大数据田地 http://lxw1234.com/archives/2015/12/588.htm 一直想找一个用于大数据平 ...
- centos7安装google浏览器
1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /ect/yum.repos.d/ vim google-chrome.repo ...
- [LeetCode] 784. 字母大小写全排列 ☆☆☆(回溯、深度优先遍历)
https://leetcode-cn.com/problems/letter-case-permutation/solution/shen-du-you-xian-bian-li-hui-su-su ...
- JAVA 泛型 通配符? extends super限定,实例区分extends super限定的作用用法
java泛型中的关键字 ? 表示通配符类型 <? extends T> 既然是extends,就是表示泛型参数类型的上界,说明参数的类型应该是T或者T的子类. <? super T& ...