元件傳值方式：1、透過路由進行傳值；2、透過在父元件中讓子元件標籤綁定父元件的數據，子元件的props接收父元件穿過來的值，子元件的props接收父元件傳的值；3、子元件向父元件傳值，用“this.$emit”來遍歷getData事件；4、非父元件之間傳值，一個綁定“this.on”事件，一個觸發“this.$ emit”事件，或者在本地存儲中添加公共數據，可以在兩個頁面中獲取
##vue元件傳值的方式：
1、路由傳參步驟：①定義路由時加上參數props: true，定義路由路徑時要留有參數佔位符: name‘用法:to="'路徑/'＋value"’#②在跳到的頁面加上參數props:['name'] #③在跳到的頁面就取得到了name‘用法: js中直接this. name；html中直接插值{{ name}}’2、父元件向子元件傳值父元件傳送值向子元件就是透過在父元件中讓子元件標籤綁定父元件的數據，子元件的props接收父元件穿過來的值即可
<div id="app"><br/> <mybtn :childid='parentid' title="我是标题"></mybtn><br/></div><br/><script><br/> new Vue({<br/> el:"app",<br/> data:{<br/> parentid:"88888"<br/> },<br/> components:{<br/> "mybtn" : {<br/> props: ['childid','title'],<br/> template: '<button>我是{{childid}}号按钮{{title}}</button>'<br/> }<br/> }<br/> })<br/></script><br/>
<template><br/> <div><br/> <mybtn : style="max-width:90%" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/> </div><br/> <br/></template><br/><script><br/> <br/> export default {<br/> name : 'test',<br/> data () {<br/> return {<br/> childid:"666",<br/> acolor:'blue',<br/> bcolor:'red'<br/> }<br/> },<br/> methods:{<br/> getColor(colors){<br/> //父组件就可以拿到子组件传过来的colors<br/> console.log(colors)<br/> this.acolor = "white";<br/> this.bcolor = colors;<br/> },<br/> //接收多个参数<br/> /*getColor(colors1,colors2){<br/> console.log(colors1,colors2)<br/> this.acolor = colors2;<br/> this.bcolor = colors1;<br/> }*/<br/> },<br/> components: {<br/> 'mybtn' : {<br/> props : ['parentid','title'],<br/> template : `<br/> <div class="box"><br/> <p>我最初是一张白纸</p><br/> <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/> </div><br/> `,<br/> methods: {<br/> changeColor(){<br/> //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/> this.$emit('changeColorEvent',"orange")<br/> //发送多个参数可以直接跟在后面<br/> //this.$emit('changeColorEvent',"orange","white")<br/> }<br/> }<br/> }<br/> }<br/> }<br/></script><br/><style scoped><br/> <br/></style><br/>
以上是vue組件傳值有什麼方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
