父组件给子组件传值
组件 传值
2023-06-13 09:16:08 时间
# 父组件给子组件传值
父组件中,通过给子组件标签v-bind绑定属性的方式传入值
<ComponentName v-bind:name="value"></ComponentName>
如果不使用v-bind传入的值为字符串,使用v-bind绑定传入的值为表达式。 子组件中,通过props对象接收值
props: {
name: { // 接收父组件传入值
type: String || ...,
default: ''
}
}
# 单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
子组件不能直接修改父组件传入的值
这里有两种常见的试图改变一个 prop 的情形:
- 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
- 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
# 父子组件间传递数据 demo
HTML
<div id="root">
<counter :count="0" @change="handleChange"></counter> +
<counter :count="1" @change="handleChange"></counter> = <span>{{total}}</span>
</div>
JS
var counter = {
props: ['count'], // 接收父组件传来的值
data() {
return {
number: this.count // 拷贝prop值的副本,用于修改
}
},
template: '<button @click="handleClick()">{{number}}</button>',
methods: {
handleClick() {
this.number++ // 由于单向数据流,不能直接修改prop的值
this.$emit('change', 1) // 派发事件并传出值,值可以有多个
}
}
}
var vm = new Vue({
el: '#root',
data: {
total: 1
},
components: {
counter
},
methods: {
handleChange(step) {
// step 子组件传来的值
this.total += + step
}
}
})
相关文章
- [译]使用React.memo()来优化React函数组件的性能
- angular4父组件向子组件传值,子组件向父组件传值的方法
- vuejs — 父组件向子组件传值(父传子)「建议收藏」
- angular框架如何实现父子组件传值、非父子组件传值
- react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」
- Vue父子组件传值的Demo「建议收藏」
- 微信小程序 父子组件传值通信
- 最佳实践:vue组件引用传值(续篇)
- angularjs子组件向父组件传值_react子组件传值
- 小程序子组件向父组件传值_小程序组件通信
- Vue 组件通信与路由
- vue子组件向父组件传值的三种方式_vue子组件改变父组件的值
- Vue子组件向父组件传值(this.$emit()方法)「建议收藏」
- 异步加载 Vue 组件以减小 chunk 体积
- vue父子组件传值props_vue子组件调用父组件的方法并传参
- 【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
- Vue非父子组件传值之事件总线(eventbus)的使用方式
- vue组件传值
- React入门十:组件的生命周期
- SprongCloud组件
- 这5个汽车组件单元最易遭到网络攻击
- 【Android 组件化】路由组件 ( 注解处理器获取被注解的节点 )
- Java NIO核心组件简介详解编程语言
- 中科院软件研究所发布区块链基础组件RepChain
- ASP编程入门进阶(二十):ADO组件之删除数据记录