Vue.js中props的使用
作用: props是用于Vue中 父组件 向 子组件 传值的时候使用。
- props的传递是单向的。
- 不要在子组件改变props的值。
一、props的定义
props 需要使用 props 选项来定义:
export default {props: ['foo'],created() {// props 会暴露到 `this` 上console.log(this.foo)}
}
除了使用字符串数组来声明 prop 外,还可以使用对象的形式:
export default {props: {title: String,likes: Number}
}
对于以对象形式声明中的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。比如,如果要求一个 prop 的值是 number
类型,则可使用 Number
构造函数作为其声明的值。
对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。
二、父子组件
看一下官方文档:
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
也就是props
是子组件访问父组件数据的唯一接口。
详细一点解释就是:
- 一个组件可以直接在模板里面渲染data里面的数据(双大括号)。
- 子组件不能直接在模板里面渲染父元素的数据。
- 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
在 Vue 中,注册 props 的方式有两种:
- 第一种方式是,以字符串数组的方式列出 props,数组中的每个实体对应一个 prop 名称。
- 第二种方法是将 props 定义为一个对象,每个 key 对应于 prop 名称。
<div id="app1"><!-- hello引用父元素的hello,它也可以引用message,greet,world等 --><child :hello='hello'></child></div><script>var com1 = Vue.component('child',{// 声明在prop中的变量可以引用父元素的数据props:['hello'],// 这里渲染props中声明的那个hellotemplate:'<div><p>{{ hello }}</p></div>',})var app1 = new Vue ({el: '#app1',data: {greet: {hello:'hello,',world: 'world',},message: 'message1',}})</script>
组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:
props down, events up
父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。
总之,我们使用 props 将数据从父组件传递给子组件。子组件还会向父组件发出事件,以防您需要从子组件向父组件发送数据/事件。
三、Prop 名字格式
如果一个 prop 的名字很长,应使用 camelCase 形式,因为它们是合法的 JavaScript 标识符,可以直接在模板的表达式中使用,也可以避免在作为属性 key 名时必须加上引号。
export default {props: {greetingMessage: String}
}
<span>{{ greetingMessage }}</span>
虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 模板时例外),但实际上为了和 HTML attribute 对齐,我们通常会将其写为 kebab-case 形式:
<MyComponent greeting-message="hello" />
对于组件名我们推荐使用 PascalCase,因为这提高了模板的可读性,能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说,使用 camelCase 并没有太多优势,因此我们推荐更贴近 HTML 的书写风格。
四、props 是一种单向数据绑定
当父组件的属性变化时,将传导给子组件,但是反过来不会。
每次父组件更新时,子组件的所有 prop 都会更新为最新值。
不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
在两种情况下,我们很容易忍不住想去修改 prop 中数据:
- Prop 作为初始值传入后,子组件想把它当作局部数据来用;
- Prop 作为原始数据传入,由子组件处理成其它数据输出。
props 是一种单向数据绑定,组件永远不该改变自己的 props 的值,这点很重要。坚守这点的原因有很多。其一是,组件修改 props 会造成程序调试困难。如果一个值被传递进多个子组件,将很难定位这个值是在哪里被修改的。此外,修改 props 会造成组件重新渲染。所以,一个组件里突变的 props 会触发组件重新渲染,这可能会反过来再次触发 props 突变。
五、例子参考
例子1
使用 props 的主要目标是传递数据/信息。您可以使用 v-bind 将您的值作为数据属性传递。
流程:从子组件props: ['data1', 'data2'] ,在父组件中 查找data1,data2的对应的name、age值
Parent.vue(父组件)
<template><div class="outer"><h3>父组件</h3>名字:<input v-model="name"><br>年龄:<input v-model="age"><br><child v-bind:data1="name" v-bind:data2="age"></child></div>
</template><script>import Child from "./Child";
export default {name: 'Parent',components: {Child},data() {return {name: "Tony",age: 20}}
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid red;padding: 20px;
}
</style>
Child.vue(子组件)
<template><div class="outer"><h3>子组件</h3><div>父组件传过来的data1:{{data1}}</div><div>父组件传过来的data2:{{data2}}</div></div>
</template><script>export default {props: ['data1', 'data2']
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>
路由(store/index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";Vue.use(Router)export default new Router({routes: [{path: '/parent',name: 'Parent',component: Parent,}],
})
结果:
修改父组件的值,可以看到,父组件修改了值之后,子组件立刻同步更新。
例子2
父子组件可以利用pros直接传值,在子组件中定义props,并可规定传值类型,当父组件使用子组件时传入相应参数,即可把父组件的数值传递到子组件中。
父组件App.vue
<template><div id="app"> {{msg}}<hellochange :msgchange=msgdata></hellochange></div>
</template><script>
import HelloChange from './components/HelloChange.vue'export default { components:{hellochange:HelloChange}, data () { return { msg:'你好vue',msgdata:'我是父组件传值'}} }
</script>
子组件HelloChange.vue
<template><!-- 所有的内容要被根节点包含起来 --><div id="hellochange"> {{msg}}<br>{{msgchange}} </div>
</template><script>export default{data(){return { msg:'我是一个home组件' }},props:{msgchange:{type:String}}}
</script>
效果:
Vue.js中props的使用相关推荐
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
- Vue.js 中的渲染函数是什么?如何使用渲染函数?
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
- echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了 在 webpack 中使用 EChar ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- vue.js中mock本地json数据
vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言 要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
最新文章
- Cascade RPN,结构的艺术带来极致提升 | NeurIPS 2019
- (0011) iOS 开发之模拟HTTP请求与响应,返回自己想要的报文。
- php 设置window计划任务,windows下设置计划任务自动执行PHP脚本
- 【ubuntu】ubuntu14.04上安装搜狗输入法
- javascript Array学习与使用
- 华为手机应用鸿蒙os,华为手机内置应用逐渐向鸿蒙 OS 靠拢
- th:text=“${user?.name}“ ${?.}
- EF框架step by step(4)—DBcontext应用于已存在数据库
- 微软Power Platform在中国市场正式商用 无缝衔接微软智能云“三驾马车”
- PDF阅读器哪个好用?看完这篇文章就可以不用再问了
- 机器学习中的数学——概率论基础知识
- 基于vscode编写markdown导出带书签(目录)的pdf
- AD-001 CR11220纽扣电池库文件
- 期货公司开户实力经纪业务的规模
- 电信计费系列2-手机+座机计费
- 校赛热身赛 Problem D. Unsolved Mystery
- CTR预估算法(浅层模型)
- 基于matlab小波变换的突变检测识别
- PC投影电脑所用技术以及实现-WiFi-direct
- DeepSORT 多目标跟踪算法笔记