父子组件传值

父子组件传值

一 父组件给子组件传值

父组件给子组件传值

• 父组件在调用子组件的位置，添加一个自定义属性， 属性的值就是父组件传入子组件的值
• 如果属性值是一个变量，或布尔类型的数据，或数值类型的数据， 该自定义属性需要使用绑定属性v-bind

1. 父组件调用子组件的时候,绑定动态属性

  <deptDialog :title="title"><deptDialog>

子组件接收

• 在子组件定义的位置，添加一个props选项
• props选项内接收到的父组件传过来的数据，可以进行一些自定义配置
  首先将props的值改为对象，对象的key：自定义的属性名，对象的value：对象
  这个对象就是当前接收到数据的配置对象

配置选项有：

• type：数据类型
• required : true 当前数据为必传数据

2. 在子组件里面通过props接收父组件传过来的数据

   props:[
        'title'
    ]


    props:{
      title: {
        type: Array,
        required: true
    }
    }

二 子组件给父组件传值

1. 子组件使用this.$emit绑定一个事件和值

this.$emit("getData", this.data)

2. 父组件使用@子组件绑定事件=新方法名

<deptDialog :visible="dialogVisible" @getData="getdata" />

3. 父组件定义新方法名接收值

getdata(val) {
    console.log(val);
}

三 ref传值

1.调用子组件的时候定义一个ref

   <deptDialog ref="header"></deptDialog>

2.在父组件里面通过 this.$refs.ref定义的名字.子组件的属性/方法 获取子组件里面的属性和方法

 this.$refs.header.属性
 this.$refs.header.方法

3. 在子组件里面通过 this.$父组件的名字.属性/方法 获取父组件的数据和方法

 this.$parent.属性
 this.$parent.方法