本篇文章给大家带来了关于vue的相关知识,其中主要总结了几种vue中父子组件传递数据的方法,包括了props & event、ref属性、provide & inject等等内容,具有一定的参考价值,下面一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、vue.js教程】
最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。
父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下:
//子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or props:{name:{type:String,default:''}} methods:{ //不能在子组件修改props数据,应触发事件让父组件处理 changeName(newName){ this.$emit('changeName',newName) } } } </script> //父组件 <template> <div> <child-comp :name="name" @changeName="changeName"></child-comp> </div> </template> <script> import childComp from 'path' export default{ data(){ return {name:'XXX'} }, components:{ childComp }, methods:{ changeName(newName){ this.name = newName; } } } </scritp>
以上就是一个完整的流程,父组件通过props将数据传递给子组件,子组件则触发事件,由父组件监听,并做相应处理。
ref属性可定义在子组件或原生DOM上,如果在子组件上,则指向子组件实例,如果在原生DOM上,则指向原生DOM元素(可以用做元素选择,省去querySelector的烦恼)。
传递数据的思路:在父组件内通过ref获取子组件实例,然后调用子组件方法,并传递相关数据作为参数。代码如下:
//子组件 <template> <div>{{parentMsg}}</div> </template> <script> export default{ data(){ return { parentMsg:'' } }, methods:{ getMsg(msg){ this.parentMsg = msg; } } } </script> //父组件 <template> <div> <child-comp ref="child"></child-comp> <button @click="sendMsg">SEND MESSAGE</button> </div> </template> <script> import childComp from 'path' export default{ components:{ childComp }, methods:{ sendMsg(){ this.$refs.child.getMsg('Parent Message'); } } } </scritp>
provide意为提供,当一个组件通过provide提供了一个数据,那么它的子孙组件就可以使用inject接受注入,从而可以使用祖先组件传递过来的数据。代码如下:
//child <template> <div>{{appName}}</div> </template> <script> export default{ inject:['appName'] } </script> // root export default{ data(){ return { appName:'Test' } }, provide:['appName'] }
【相关推荐:javascript视频教程、vue.js教程】
以上就是Vue中父组件向子组件传递数据的方法的详细内容,更多请关注php中文网其它相关文章!