首页 > 编程知识 正文

vue兄弟组件传值几种方法,父子组件传值

时间:2023-05-06 21:05:53 阅读:173404 作者:4143

vue说到组件通信,不仅仅是父组件传递子组件,子组件传递父组件,跨越层次传递值,兄弟组件传递值。 我个人认为,除了传递父子组件的值以外,可以用vuex解决,但这个姑且不论vuex,这里介绍父子组件的值。 你不会打我的!

一.父组件传子组件,核心--props

下面是场景,单击以将值传递给子集合

现在触发handleClick单击事件并声明其他clickData。 单击该按钮时,inpMessage的值将被指定给clickData,并传递给子部件

父组件index.vue

templatedivinputtype=' text ' v-model=' InP message ' button @ click=' handle click '单击以装配子组件/button children 3360 clickData是父程序集传递的值/div/templatescriptimportchildrenfrom ' ./page/children ' export default { name 33333 } components 3333 data({return ) InPmessage: ',clickData:'' } },methods:{ handleClick

templatedivinputtype=' text ' v-model=' children message '! --button @click='childClick '父组件/button---/div/templatescriptexportdefault { name 3360 ' children ',prate 数据()返回(children message 3360 (), created ) ) this.childrenmeeding ),created ) ) this.childrenmedren }/script style scoped/style上的父组件将值分配给子组件上面是点击事件传值的场景,另一个是动态传值的场景,实时更新父组件的值,自身组件动态更新。 这里使用watch。 附加自己的组件代码

次组合: watch拦截法

templatedivinputtype=' text ' v-model=' children message '! --button @click='childClick '父组件/button---/div/templatescriptexportdefault { name 3360 ' children ',prate created ) ) this.children message=this.message ), //此处使用watch方法侦听父组件的传输以实现对watch:{message(val ) { //message的实时更新是父组件的值,而val参数是将父组件的值指定给childrenMessage子组件的值} } }/scriptstyle scoped/style,http://www.Sina.com/style2 vue中,子组件是父组件您可以以自定义事件的形式更改值,例如单击事件并以$emit传递,如代码注释中所述。

父组件

templatedivinputtype=' text ' v-model=' InP message ' button @ click=' handle click '单击以打开子组件/button //传递给@messageData的val参数是传递的值children : message=' click data ' @ messagedata=' get data '/div/templatescriptimportchiortch PAG grom children ' export default { name : ' index ',components:{ children },data () return(inpmessage3360 ',CLP ) clicicage methods : { handle click (} { this.click data=this.InP message ),//接收从子部件传递的值,val参数是传递的值

templatedivinputtype=' text ' v-model=' children message ' button @ click=' child click '父组件/button/div/tempp props : {消息:字符串}, 通过data ({ return } children message created ((this.children message=this.message ),methods: ) /单击将值传递给父组件相当于this的后接多个参数childclick((this.$emit ) messagedata ),this.childrenMessage ) console.log ) this.childrenMessage 期待着大家的批评指正。

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