vue-组件间传值

vue 组件间传值

一、父组件向子组件传值–详细讲解（自定义属性）

首先子组件顾名思义就是在一个组件中利用 **components:**包含 Vue 实例可用组件的哈希表,简而言之就是用来注册组件的，一个组件能够生效，必须通过一下步骤：

1. 使用 import 引入组件 import myForm from '@/pages/my-form'
2. 用 components 来注册这个组件 components:{myForm}
3. 在template 中使用这个组件 <my-form></my-form>

下面如何通过自定义属性的方式，把父组件中的值传给子组件？

需求：把父组件中的title 传给子组件

1. 在父组件中的data 中定义

   exprot default {
     data (){
        return{
          title:'组件传值'
        }
     }
   }

2. 在子组件上通过自定义属性的方式把title值绑定到子组件上

   <my-form  :title="title"></my-form>

3. 这时候，title值已经传给子组件了，现在需要子组件通过 props 属性 来接收 title 值

   exprot default {
     props:["title"]
   }

4. 这个时候就可以直接把 title值拿来用了,这里使用模板字符串来展示

   <view>{{title}}</view>  //页面上会显示   组件传值

二、子组件向父组件传值–详细讲解 （自定义事件）

首先还是需要把子组件引入父组件中，方法同上！！！

需求：把子组件中的值传给父组件

1. 在子组件中使用 this.$emit(‘事件’，值) ，事件：就是在父组件中使用的函数，值：就是子组件向父组件传递的参数

   exprot default {
     data (){
        return{
          title:'子传父'
        }
     },
     created(){
       this.eventEmit()
     },
     methods:{
       eventEmit(){
         this.$emit('addCount',title)
       }
     }
   }
   

2. 在父组件中子组件引用出使用 @addCount="add" 注意：addCount 必须和子组件中定义的一样，add可以一样也可以不一样，看个人习惯，

   <my-form  :title="title" @addCount="add"></my-form>

3. 最后就是把这个方法写到方法体内，

   exprot default {
     data (){
        return{
        }
     },
     methods:{
       add(value){
         console.log(value)  //=> 子传父
       }
     }
   }

以上两种方法是基本的组件间传值的方法，组件间传值还有多种方法，还在学习中！！！