父子组件,兄弟组件间传值
目标:
vue的父子组件间传值
内容:
两种方式
- 父组件通过子组件绑定ref调用子组件的方法改变子组件的内容,比如子组件页面刷新,数值改 变,样式改变等等操作
- 通过props 只传数据,改变某个数值,不能执行方法,刷新页面等等。
兄弟组件间传值:
父组件通过调用子组件传值
该案例也可以说是兄弟组件间如何传值。大致思路是,先将
父组件代码示例:
子组件2的代码示例:
这里写具体的子组件的具体实现的
还是上图中的子组件1通过 this.
e
m
i
t
传值给父组件,父组件在对应的子组件中通过
@
绑定
t
h
i
s
.
emit 传值给父组件,父组件在对应的子组件中 通过@ 绑定 this.
emit传值给父组件,父组件在对应的子组件中通过@绑定this.emit中命名的名字,绑定父组件的方法
子组件向父组件传值:
方式一:
通过 this.
e
m
i
t
传值给父组件示例:子组件中
t
h
i
s
.
emit 传值给父组件 示例: 子组件中 this.
emit传值给父组件示例:子组件中this.emit(参数1,参数2); 参数1可以自主命名不限定,参数2为需要传过去的值
父组件中接收 @后面的名字和子组件中 this.$emit中的参数1名字需要保持一致。
方法的参数 code 是子组件中 this.$emit中的参数2
方式二:
.通过父组件给子组件传递的 props 实现:子组件给父组件传递数据
因为时间问题暂时不展示该方式,可自行查资料。后续补上~~~
父组件向子组件传值:
通过props
父组件
<div>
<!-- 我是子组件 -->
<children :mesg="mesg" :content="content"></children>
</div>
子组件
<template>
<div>
<!-- 子组件内容 -->
<div>{{mesg}}</div>
</div>
</template>
<script>
export default {
props: {
mesg: String,
content: String
}
}
</script>
一般情况下。在props 定义了可以在子组件直接使用。
注释:在ts 曾经遇到过在子组件的方法中无法直接取到值的情况,通过 方法
const { mesg} = { …props }; 获取到父组件的内容。
记录学习上的点点滴滴
希望共同学习
一个人走的更快,一群人走的更远