Component 组件props 属性设置
props定义属性并获取属性值
html
<div id="app">
<!-- 注册一个全局逐渐 -->
<!-- 注意如果自定义的属性带-像下面这个h-hehe,
在props里面就要写驼峰写法,还有反过来就不行,你比如自定义标签用驼峰写法就报错 -->
<!-- 可以不绑定属性,那就不用写v-bind了 -->
<register v-bind:h-hehe="haha"></register>
</div>
js
var demoTmp ={
// 注意只有data赋值的地方是属性值,这里两个都是hehe,自定义的属性,而不是属性值haha
template:`<h2>{{message}}--{{hHehe}}</h2>`,
props:["hHehe"],
data:function(){
return{
message:"内部组件components"
}
}
}
var vm = new Vue({
el:"#app",
data:{
haha:"props定义属性并获取属性值"
},
components:{
'register':demoTmp
}
})
Component 组件props 属性设置的更多相关文章
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Android EditText组件drawableLeft属性设置的图片和hint设置的文字之间的距离
有的时候,我们需要在文本框里放置icon图片,并且设置默认提示文字的时候,需要设置两者之间的间距,如下图: 这里想设置的就是之前的手机icon和”请输入手机号“之间的距离,则可是使用以下的方式: &l ...
- 组件通过props属性传值
组件之间的传值 组件是一个单独功能模块的封装,有属于自己的data和methods,一个组件的 data 选项必须是一个函数 为什么必须是函数:因为只有当data是函数时,不同实例调用同一个组件时才会 ...
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- 怎样在 Vue 的 component 组件中使用 props ?
1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过 ...
- vue组件之属性Props
组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...
随机推荐
- Python 5 -- 模块
模块 - 模块就是包含函数的文件,用于共享代码. 导入已有模块 # 导入整个模块 import random # 导入整个模块 print(random.randint(0,255)) #调用模块中的 ...
- Windows 下VC++6.0制作、使用动态库和静态库
Windows 下VC++6.0制作.使用动态库和静态库 一.VC++6.0制作.使用静态库 静态库制作 1.如图一在VC++6.0中new一个的为win32 static library工程并新建一 ...
- numpy数学数据处理
数学和统计方法 sum 对数组中全部或某轴向的元素求和.零长度的数组的sum为0. mean 算术平均数.零长度的数组的mean为NaN. import numpy as np import nump ...
- Linux基础命令---显示树形进程pstree
pstree pstree显示正在运行的进程的树形结构,树以PID为根:如果省略了pid则以init为根.如果指定了用户名,则显示根植于该用户拥有的进程的所有进程树.如果pstree被调用为pstre ...
- springboot用@Autowired和@PostConstruct注解把config配置读取到bean变成静态方法
springboot用@Autowired和@PostConstruct注解把config配置读取到bean变成静态方法 @SpringBootApplication public class Sen ...
- JustOj 1386: 众数的数量
题目链接:http://oj.jxust.edu.cn/problem.php?id=1386 题目描述 qwn和Q伟N最近沉迷于Battle of Balls,天天翘课玩游戏.因为Q伟N太坑了,所以 ...
- JustOj 2043: N!
题目描述 输出N的阶乘.(注意时间限制150ms&&注意不能打表后输出,赛后我们会检查代码,如有发现,该位同学总分记0分处理) 打表的定义:在本地主机预先计算出了每个值对应的答案,并把 ...
- 前端框架VUE----babel
这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个 ...
- Source Insight 如何将script等文件加入
点击菜单栏Options -> Document Options , 然后再弹出的对话框中找到File filter,文件过滤的设置,里面肯能有*.c;*.h 你在后面添加Makefile,注意 ...
- Eloquent JavaScript #02# program_structure
第一章中作者介绍了各种值,但是这些独立的值是没有意义的,只有当值放在更大的框架的时候才会彰显它们的价值.所以第二章开始介绍程序结构. 1.var VS. let 以及 const 作者推荐用 let ...