vue組件通信，點擊傳值，動態傳值（父傳子，子傳父）

vue說到組件通信，無非是父組件傳子組件，子組件傳父組件，跨級組件傳值，同級組件傳值

一、父組件傳子組件，核心--props

在這里觸發 handleClick 點擊事件，額外聲明一個clickData，點擊按鈕將 inpMessage 的值賦給 clickData ，再傳給子組件

父組件index.vue

1.  
   <template>
2.  
   <div>
3.  
   <input type="text" v-model="inpMessage">
4.  
   <button @click="handleClick">點擊傳給子組件</button>
5.  
   <children :message="clickData" /> //message為子組件props接收的值，clickData為父組件要傳的值
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    import children from './page/children'
11.  
    export default {
12.  
    name: "index",
13.  
    components:{
14.  
    children
15.  
    },
16.  
    data(){
17.  
    return{
18.  
    inpMessage:'',
19.  
    clickData:''
20.  
    }
21.  
    },
22.  
    methods:{
23.  
    handleClick(){
24.  
    //賦值
25.  
    this.clickData = this.inpMessage
26.  
    },
27.  
    }
28.  
    }
29.  
    </script>
30.  
     
31.  
    <style></style>

子組件children.vue

1.  
   <template>
2.  
   <div>
3.  
   <input type="text" v-model="childrenMessage">
4.  
   <!--<button @click="childClick">傳值給父組件</button>-->
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
    name: "children",
11.  
    props:{
12.  
    message:String //接收父組件傳過來的值，這是稍微高級一點的寫法，也可以props:[' message']
13.  
    },
14.  
    data(){
15.  
    return{
16.  
    childrenMessage:''
17.  
    }
18.  
    },
19.  
    created(){
20.  
    this.childrenMessage=this.message //初始化時候的賦值
21.  
    },
22.  
    }
23.  
    </script>
24.  
     
25.  
    <style scoped>
26.  
     
27.  
    </style>

上面是父組件傳值給子組件的過程，最重要的點是props接收，上面是點擊事件傳值，還有一種場景是動態傳值，實時更新父組件的值，自組件動態更新，這里就要用到watch了，附上自組件代碼

子組件：watch監聽法

1.  
   <template>
2.  
   <div>
3.  
   <input type="text" v-model="childrenMessage">
4.  
   <!--<button @click="childClick">傳值給父組件</button>-->
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
    name: "children",
11.  
    props:{
12.  
    message:String
13.  
    },
14.  
    data(){
15.  
    return{
16.  
    childrenMessage:''
17.  
    }
18.  
    },
19.  
    created(){
20.  
    this.childrenMessage=this.message
21.  
    },
22.  
     
23.  
    //這里用watch方法來監聽父組件傳過來的值，來實現實時更新
24.  
    watch:{
25.  
    message(val){ //message即為父組件的值，val參數為值
26.  
    this.childrenMessage = val //將父組件的值賦給childrenMessage 子組件的值
27.  
    }
28.  
    }
29.  
     
30.  
    }
31.  
    </script>
32.  
     
33.  
    <style scoped>
34.  
     
35.  
    </style>

二、子組件傳父組件，核心--$emit，這里附上完整父子傳值的代碼,vue是不允許子組件向父組件傳值去改變父組件的值的，但是我們可以通過自定義事件的形式去改變值，例如點擊事件，再通過$emit來傳遞，代碼注釋中有介紹。

父組件

1.  
   <template>
2.  
   <div>
3.  
   <input type="text" v-model="inpMessage">
4.  
   <button @click="handleClick">點擊傳給子組件</button>
5.  
   //@messageData為子組件聲明傳遞過來的值，函數，getData為函數，val參數是傳遞過來的值
6.  
   <children :message="clickData" @messageData="getData"/>
7.  
   </div>
8.  
   </template>
9.  
    
10.  
    <script>
11.  
    import children from './page/children'
12.  
    export default {
13.  
    name: "index",
14.  
    components:{
15.  
    children
16.  
    },
17.  
    data(){
18.  
    return{
19.  
    inpMessage:'',
20.  
    clickData:''
21.  
    }
22.  
    },
23.  
    methods:{
24.  
    handleClick(){
25.  
    this.clickData = this.inpMessage
26.  
    },
27.  
    //接收子組件傳遞的值，val參數是傳遞過來的值 ，給inpMessage 賦值，子組件改變父組件的值
28.  
    getData(val){
29.  
    this.inpMessage = val
30.  
    console.log(val)
31.  
    }
32.  
    }
33.  
    }
34.  
    </script>
35.  
     
36.  
    <style></style>

子組件

1.  
   <template>
2.  
   <div>
3.  
   <input type="text" v-model="childrenMessage">
4.  
   <button @click="childClick">傳值給父組件</button>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   export default {
10.  
    name: "children",
11.  
    props:{
12.  
    message:String
13.  
    },
14.  
    data(){
15.  
    return{
16.  
    childrenMessage:''
17.  
    }
18.  
    },
19.  
    created(){
20.  
    this.childrenMessage=this.message
21.  
    },
22.  
    methods:{
23.  
    //點擊傳值給父組件，通過$emit傳遞，第一個參數messageData相當於傳播的媒介，this.childrenMessage為需要傳遞的值，后面也可以傳遞多個參數
24.  
    childClick(){
25.  
    this.$emit('messageData',this.childrenMessage)
26.  
    console.log(this.childrenMessage)
27.  
    }
28.  
    },
29.  
    watch:{
30.  
    message(val){
31.  
    this.childrenMessage = val
32.  
    }
33.  
    }
34.  
     
35.  
    }
36.  
    </script>