首页 > 编程知识 正文

vue组件传值的五种方法,vue兄弟组件传值几种方法

时间:2023-05-04 19:58:58 阅读:18962 作者:1063

使用vue进行项目开发时,组件之间的通信是不可避免的。 父程序集传递给子程序集的值。 子程序集可以从props中获取。 子组件试图更改数据。 Vue禁止子组件直接将值传递给父组件。 只能通过触发事件来传达给父组件。 用代码简单易懂地共享一下吧

1 .父程序集为子程序集父组件代码:

template div parent //使用冒号绑定将引入的子部件命名为子部件child : parenttochild=' value1'/child/parent/div/temptochild 向传递值的子组件引入impo opt components/child ' export default (data ) ) return value 1: ',/尝试用data初始化传递的值),//子组件

template div p这是子组件/p { { parenttochild } }/div/templatescriptexportdefault { data } { return }, props: ['parentToChild']、/或props : { parenttochild 3360 sochild },以确保的字段与绑定到父组件的字段匹配

2 .子组件将值传递给父组件的Vue只能通过触发事件来实现,因为它禁止子组件直接将值传递给父组件。

子组件代码:

template div p这是子组件/p button @click='clickEvent '单击按钮/button/div/templatescriptexportdefault { data () reture 可以传递value3:false,},mounted,watch: {},methods 3360 { clickevent } { this.$ emment } },created ()

template div p这是从父组件/p parent //子组件传递的值child @ sendvaluetoparent=' getvaluefromchild '/child/parent/div 模板划线子部件importchildfrom ' ././components/child ' export default { data (},/子部件components : { chomponents } 部署的methods : { getvaluefromchild (value 1、value2、value3, value4)//打印值分别为//value1:这可以传递给父组件的值//value 23360多个值//value : false//value 43360 true (}/ssse

大家看的时候,把亲子零件对应起来看的话,我觉得很容易理解。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。