這次帶給大家在vue組件中傳遞資料步驟詳解，在vue組件中傳遞資料的注意事項有哪些，以下就是實戰案例，一起來看一下。
Vue 的元件作用域都是孤立的，不允許在子元件的範本內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞。元件之間傳遞資料大致分為三種情況：
父元件向子元件傳遞數據，透過 props 傳遞資料。
子元件向父元件傳遞數據，透過 events 傳遞資料。
兩個同級元件之間傳遞數據，透過 event bus 傳遞數據。
<template>
<p class="child">
{{ msg }}
</p>
</template>
<script>
export default {
name: 'child',
data(){
return {
}
},
props: ['msg']
</script><template>
<p class="child">
child
<child :msg="message"></child>
</p>
</template>
<script>
import child from './child.vue'
export default {
name: 'parent',
components: { child },
data () {
return {
message: 'hello vue'
}
}
}
</script>檢視
。但是在子元件中，我們不要去修改 prop。如果你必須要修改到這些數據，你可以使用以下方法：方法一：把prop 賦值給一個局部變量，然後需要修改的話就修改這個局部變量，而不影響prop
export default {
data(){
return {
newMessage: null
}
},
props: ['message'],
created(){
this.newMessage = this.message;
}
}export default {
props: ['message'],
computed: {
newMessage(){
return this.message + ' 哈哈哈';
}
}
}
#子元件主要透過實踐傳遞資料給父元件的
子元件部分：
<template> <p class="child"> <span>用户名：</span> <input v-model="username" @change="sendUser" /> </p> </template>
子元件的html中，當input中的值改變時，將username傳遞給parent.vue。 先宣告了一個sendUser方法，用change
來呼叫sendUser。
<script>
export default {
name: 'parend',
data () {
return {
username: ''
}
},
methods: {
sendUser () {
this.$emit('changeName', this.username)
}
}
}
</script>在sendUser中，使用$emit來遍歷changeName事件，並傳回this.name，其中changeName是一個自訂的事件，功能類似於中轉，this.name將透過這個事件傳遞給父組件。
父元件部分：在父元件中宣告了一個getUser方法，用changeName事件呼叫getUser方法，取得從子元件傳遞過來的參數username<template>
<p class="parent">
<child @changeName="getUser"></child>
<p>用户名：{{user}}</p>
</p>
</template>登入後複製
<script>
import child from './child.vue'
export default {
name: 'parent',
components: { child },
data () {
return {
user: ''
}
},
methods: {
getUser(data) {
this.user = data
}
}
}
</script><template> <p id="app"> <c1></c1> //组件1 <c2></c2> //组件2 </p> </template>
<template>
<p class="c1">
page
<button @click="changeMsg">click</button>
</p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
name: 'c1',
data () {
return {
message: 'hi'
}
},
methods: {
changeMsg () { //点击按钮，将this.message传递给c2
bus.$emit('sendMsg', this.message)
}
}
}
</script><template>
<p class="c2">
{{msg}}
</p>
</template>
<script>
var Bus = new Vue();
export default {
name: 'c2',
data () {
return {
msg: ''
}
},
created () {
bus.$on('sendMsg',(data)=>{ //data即为c1组件中的message
this.msg = data
})
}
}
</script>//Bus.js import Vue from 'vue' const Bus = new Vue() expore default Bus
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})以上是在vue組件中傳遞資料步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
