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>