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>

标签：vue,子传父,val,childrenMessage,组件,message,children,传值
来源： https://www.cnblogs.com/luluping/p/13710072.html