技术标签: 前端 vue.js javascript
vue是单项数据流,引用Vue的官网的话:父系 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父及组件的状态,从而导致你的应用的数据流向难以理解。
在父子组件通讯的时候,子组件都禁止直接修改父级传过来的prop 直接修改在控制台会报错。但VUE的两个语法糖能做到这一点,就是自定义组件上的 v-model指令 以及 .sync修饰符。
另外,还可以通过子组件触发父组件中方法的方式,通过父组件的方法,更改父组件的数据。
父组件代码:
<template>
<div>
<h2>父组件的值:{
{
num}}</h2>
<ChildA v-model="num" />
</div>
</template>
<script>
import ChildA from './ChildA.vue'
export default {
components: {
ChildA },
data () {
return {
num: 1
}
},
methods: {
}
}
</script>
<style scoped>
</style>
子组件代码:
<template>
<div>
<h2>子组件的值:{
{
childNum }}</h2>
</div>
</template>
<script>
export default {
name: "ChildA",
// 父组件使用v-model来传递
// 子组件使用model属性绑定props
model: {
prop: "number",//用来接收父组件传来的值
event: "number-event"//用来触发的事件
},
props: {
number: {
type: Number
}
},
data () {
return {
childNum: 2
}
},
//在子组件挂载完成的时候 进行触发自定义时间
mounted () {
setTimeout(() => {
this.$emit("number-event", this.childNum)
}, 1000)
}
}
</script>
<style scoped>
</style>
1s后修改成功:
官网这样解释的:
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突:
**所以 prop 并不一定非要是 value,事件的名称也并不必须是input **
// 父组件使用v-model来传递
// 子组件使用model属性绑定props
model: {
prop: "number",//用来接收父组件传来的值
event: "number-event"//用来触发的事件
},
父组件里的 < ChildA v-model=“num” /> 的值将会传入子组件 的 prop。同时当子组件event 触发事件this.$emit(“number-event”,this.childNum);,父组件的值将会被更改
官网的介绍:
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。 这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
this.$emit(‘update:title’, newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:
父组件代码:
<template>
<div>
<h2>父组件的值:{
{
number}}</h2>
<ChildA :number.sync="number" />
</div>
</template>
<script>
import ChildA from './ChildA.vue'
export default {
components: {
ChildA },
data () {
return {
number: 1
}
}
}
</script>
<style scoped>
</style>
子组件代码:
<template>
<div>
<h2>子组件的值:{
{
number }}</h2>
<button @click="num">更改父组件的值</button>
</div>
</template>
<script>
export default {
name: "ChildA",
props: {
number: {
type: Number
}
},
data () {
return {
number1: 2
}
},
methods: {
num () {
this.$emit('update:number', this.number1)
}
}
}
</script>
<style scoped>
</style>
将父组件的方法通过 props 传递给子组件,子组件可以直接出发父组件的方法,从而实现子组件修改父组件数据,同时也可以将子组件的数据通过参数的形式发送给父组件。
父组件代码:
<template>
<div>
<h2>父组件</h2>
<ChildA :msgFromParent="msgFromParent"
:changeMsgFromParent="changeMsgFromParent" />
<!-- 父组件设置更改自己数据的方法,同时传递给子组件 -->
</div>
</template>
<script>
import ChildA from './ChildA.vue'
export default {
components: {
ChildA },
data () {
return {
msgFromParent: "msg from parent"
}
},
methods: {
changeMsgFromParent (val) {
this.msgFromParent = val
}
}
}
</script>
<style scoped>
</style>
子组件数据:
<template>
<div>
<h2>{
{
msgFromParent }}</h2>
<button @click="changeParentData">改变父组件的值</button>
</div>
</template>
<script>
export default {
name: "ChildA",
// 子组件通过Props接收父组件传递来的数据和方法,在组件实例上可以直接获取和触发
props: {
msgFromParent: String,
changeMsgFromParent: Function
},
methods: {
changeParentData () {
this.changeMsgFromParent("msg changed by childA")
}
}
}
</script>
<style scoped>
</style>
在父组件中定义一个修改数据的方法,然后传递给子组件,子组件通过this,$emit直接触发父组件的方法,同时子组件可以传递参数给父组件,实现父子通信。
父组件代码:
<template>
<div>
<h2>父组件</h2>
<ChildA :msgFromParent="msgFromParent"
@changeMsgFromParent="changeMsgFromParent" />
<!-- 父组件将更改自己数据的方法传递给子组件 -->
</div>
</template>
<script>
import ChildA from './ChildA.vue'
export default {
components: {
ChildA },
data () {
return {
msgFromParent: "msg from parent"
}
},
methods: {
changeMsgFromParent (val) {
this.msgFromParent = val
}
}
}
</script>
<style scoped>
</style>
子组件代码:
<template>
<div>
<h2>{
{
msgFromParent }}</h2>
<button @click="changeParentData">改变父组件的值</button>
</div>
</template>
<script>
export default {
name: "ChildA",
props: {
msgFromParent: String,
},
methods: {
changeParentData () {
// 子组件通过this.$emit触发父组件的方法,同时可以进行数据传递
this.$emit("changeMsgFromParent", "msg changed by childA")
}
}
}
</script>
<style scoped>
</style>
子组件直接触发父组件的事件,无需进行方法的传递与接收。
父组件代码:
```javascript
<template>
<div>
<h2>父组件</h2>
<ChildA :msgFromParent="msgFromParent" />
</div>
</template>
<script>
import ChildA from './ChildA.vue'
export default {
components: {
ChildA },
data () {
return {
msgFromParent: "msg from parent"
}
},
methods: {
// 父组件定义需要的方法
changeMsgFromParent (val) {
this.msgFromParent = val
}
}
}
</script>
<style scoped>
</style>
子组件代码:
<template>
<div>
<h2>{
{
msgFromParent }}</h2>
<button @click="changeParentData">改变父组件的值</button>
</div>
</template>
<script>
export default {
name: "ChildA",
props: {
msgFromParent: String,
},
methods: {
changeParentData () {
// 子组件通过this.$parent直接触发父组件的方法,同时可以进行数据传递
this.$parent.changeMsgFromParent("msg changed by childA")
}
}
}
</script>
<style scoped>
</style>
文章浏览阅读2.9k次,点赞8次,收藏14次。测试主要做什么?这完全都体现在测试流程中,同时测试流程是面试问题中出现频率最高的,这不仅是因为测试流程很重要,而是在面试过程中这短短的半小时到一个小时的时间,通过测试流程就可以判断出应聘者是否合适,故在测试流程中包含了测试工作的核心内容,例如需求分析,测试用例的设计,测试执行,缺陷等重要的过程。..._测试过程管理中包含哪些过程
文章浏览阅读870次,点赞16次,收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段,对政府政务进行数字化改革,提高政府工作效率,提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展,政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域,包括政策决策、政府服务、公共安全、社会治理等。在这些领域,人工...
文章浏览阅读219次,点赞2次,收藏4次。系统主要的用户为用户、管理员,他们的具体权限如下:用户:用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试,并且查看相关成绩用户可以进行错题集的整理管理员:管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析,并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件
文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式,UML2功能更强大,但是两者生成过程差别不大1.建立Test工程,如下图,uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图
文章浏览阅读174次。需求:一个topic包含很多个表信息,需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project,只有data和name。因为担心data里面会空值,所以根同事商量,让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区,proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka
文章浏览阅读380次。原标题:Java Spring中同时访问多种不同数据库 多样的工作要求,可以使用不同的工作方法,只要能获得结果,就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题,有时是必须把数据归档到某种数据仓库中,有时是要把数据变更推送到第三方数据库中。使用Spring框架时,使用单一数据库是非常容易的,但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库
文章浏览阅读3.6k次,点赞9次,收藏25次。本案例描述了晶振屏蔽以及开关电源变压器屏蔽对系统稳定工作的影响, 硬件设计时应考虑。_eft电路图
文章浏览阅读1.1k次。对于物料价格的更改,可以采取不同的手段:首先,我们来介绍MR21的方式。 需要说明的是,如果要对某一产品进行价格修改,必须满足的前提条件是: ■ 1、必须对价格生效的物料期间与对应会计期间进行开启; ■ 2、该产品在该物料期间未发生物料移动。执行MR21,例如更改物料1180051689的价格为20000元,系统提示“对于物料1180051689 存在一个当前或未来标准价格”,这是因为已经对该..._mr21 对于物料 zba89121 存在一个当前或未来标准价格
文章浏览阅读7.4k次,点赞3次,收藏13次。[文章导读]联想启天M420是一款商用台式电脑,预装的是win10系统,用户还是喜欢win7系统,该台式机采用的intel 8代i5 8500CPU,在安装安装win7时有很多问题,在安装win7时要在BIOS中“关闭安全启动”和“开启兼容模式”,并且安装过程中usb不能使用,要采用联想win7新机型安装,且默认采用的uefi+gpt模式,要改成legacy+mbr引导,那么联想启天M420台式电..._启天m420刷bios
文章浏览阅读2.7k次,点赞2次,收藏9次。一,为什么要冗余数据互联网数据量很大的业务场景,往往数据库需要进行水平切分来降低单库数据量。水平切分会有一个patition key,通过patition key的查询能..._保证冗余性
文章浏览阅读88次。是时候闭环Java应用了 原创 2016-08-16 张开涛 你曾经因为部署/上线而痛苦吗?你曾经因为要去运维那改配置而烦恼吗?在我接触过的一些部署/上线方式中,曾碰到过以下一些问题:1、程序代码和依赖都是人工上传到服务器,不是通过工具进行部署和发布;2、目录结构没有规范,jar启动时通过-classpath任意指定;3、fat jar,把程序代码、配置文件和依赖jar都打包到一个jar中,改配置..._那么需要把上面的defaultjavatyperesolver类打包到插件中
文章浏览阅读909次。1.得下载一个番茄插件,按alt+g才可以有函数跳转功能。2.不安装番茄插件,按F12也可以有跳转功能。3.进公司的VS工程是D:\sync\build\win路径,.sln才是打开工程的方式,一个是VS2005打开的,一个是VS2013打开的。4.公司库里的线程接口,在CmThreadManager.h 里,这个里面是我们的线程库,可以直接拿来用。CreateUserTaskThre..._番茄助手颜色