使用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
大家看的时候,把亲子零件对应起来看的话,我觉得很容易理解。