怎样在 Vue 的 component 组件中使用 props ?
1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过它来接收从 父组件 传进来的数据 ( 韩梅梅 ).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<!-- 这里的 name 表示组件内部的 props name -->
<myname name="韩梅梅"></myname>
</div>
<script>
// component myname
Vue.component('myname', {
props: ['name'],
template: '<h2>{{ name }}</h2>'
})
// Vue 实例
var vApp = new Vue({
el: "#app"
})
</script>
</body>
</html>
2. 上面这种形式是写死的, 一般不这样用, 而是通过 v-bind 将数据放到 $data 中, 这样可以 动态修改 / 更新 数据.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<family v-for="item in names" v-bind:name="item"></family>
</div>
<script>
// component family
Vue.component('family', {
props: ['name'],
template: '<h2>{{ name }}</h2>'
})
// Vue 实例
var vApp = new Vue({
el: "#app",
data: {
names: ["李雷","韩梅梅","李小雷"]
}
})
</script>
</body>
</html>
怎样在 Vue 的 component 组件中使用 props ?的更多相关文章
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue js 在组件中对数组使用splice() 遇到的坑。。。
遇到的问题: 用el-dialog写了个子组件 要实现在子组件中增删数据 点击确定后把值返回给父组件 父组件在每次点开子组件时都会把自己的值传进去. //父组件传值 this.$refs.transf ...
- 怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢
1.以前玩omi框架的时候,有Omi.get方法来获取实例, ...好久没玩了,忘了.反正很喜欢该方法.2.如今想在vue里面怎么能够快速获取到对应组件标签名的的实例呢?3.文档也看过,似乎脑海中没啥 ...
- Vue.js——component(组件)
概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...
- Vue框架——页面组件中使用小组件
小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...
- VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题
碰到的问题是: upload 组件在 on中写的监听事件不会被触发 在 props 中来监听:==>
- vue 单文件组件中样式加载
在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
随机推荐
- 最初学习mysql的一些操作留存
一:数据库的初始话操作 mysql -u root -p //数据库的登陆 show databases: //展现数据哭中存储的所有文件 use 数据库名: //进入当前要 ...
- 如何在linux中发送邮件，使用163邮箱发信。
linux中,可以使用mail命令往外发送邮件,在使用前,只需要指定如下简单配置即可,这里演示用 163.com 邮箱发送至 qq.com 编辑 /etc/mail.rc,写入下方的参数 se ...
- sentinel备忘
git https://github.com/alibaba/Sentinel https://github.com/dubbo/dubbo-sentinel-supportdubbo http: ...
- 如何解决Sublime text中文乱码问题
Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...
- driver.implicitly_wait不起作用的排错方法
环境是python3.6+selenium 3.4.3+chrome64 在编写前端自动化脚本时使用implicitly_wait时不起作用 1.确认自己是否正确使用,可用简单的例子来测试,比如: 此 ...
- spark学习中一些小问题---1
1.linux文件查找命令.这个很关键 find / -name employees.json 2.hdfs命令上传整个文件夹或文件 hadoop dfs -put /home/root/apache ...
- COALESCE关键字的使用
COALESCE是sql标准里面的一个关键字,我们可以和聚合函数sum,count,max等一起使用完成一些特殊的功能. 以下sql语句基于mysql 1.查询某一个列总和,如果没有数据或者NULL返 ...
- Python实现的寻找前5个默尼森数算法示例
Python实现的寻找前5个默尼森数算法示例 本文实例讲述了Python实现的寻找前5个默尼森数算法.分享给大家供大家参考,具体如下: 找前5个默尼森数. 若P是素数且M也是素数,并且满足等式M=2* ...
- React Native细节知识点总结<一>
1.propTypes: static propTypes = { name:PropTypes.string, ID:PropTypes.number.isRequired, } 'isRequir ...
- androidstudio出包问题--Warning: there were 1 unresolved references to classes or interfaces.
问题:存在unresolved的类或接口导致打包失败 Warning: there were 1 unresolved references to classes or interfaces. You ...