父子组件间的通信——props

父子组件间的通信之props

---

文章目录

• 系列文章目录
• 前言
• 一、props的使用之父组件数据传给子组件
• 1.应用场景
• 2.用一段代码感受一下props
• 3.子组件的代码展示
•  4、运行结果
•  5、props校验：不加限制条件、加required、default、type
• 6、props父子组件间通信，数据单向流动的特点
• 7、父组件给子组件传动态数据

---

前言

在vue的学习过程中，我们将会接触很多种关于组件之间通信的方法，有父传子、子传父、兄弟之间传递。这篇文章讲的是一个既可以父传子又可以子传父的方法——props!

---

一、props的使用之父组件数据传给子组件

1.应用场景

   1、假设父组件从后台服务器中获取到了某列表信息：

 2、而当点开作为子组件的编辑，列表信息呈现在编辑的表单中，在没有额外接口获取数据的情况下，我们可以直接去父组件中获取对应数据，这个时候相信光的props可以申请出战了。

2.用一段代码感受一下props

父组件代码：

<template>
  <div>
    <son :father="name" />
    <input type="text" v-model="name" />
  </div>
</template>

<script>
import son from './components/son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      name: "无处安放的灵魂",
      age:'800岁'
    }
  }
</script>

 

3.子组件的代码展示

<template>
    <div>{{father}}
        <input type="text" v-model="father" />
    </div>
</template>
<script>
export default {
    props: {
        father: String
    }
    }
</script>
  

---

 4、运行结果

         

 5、props校验：不加限制条件、加required、default、type

1、不加校验

<script>
export default {
    props:[father],
}
</script>

2、校验多个类型

<script>
export default {
    props:{
         father:[String,Number,Boolean]
           }
}
</script>

3、加required或default或type

<script>
export default {
    props:{
       father:{
                  type:String,
                  required:true,
                  default:"三水木雨"
              }
           }
}
</script>

6、props父子组件间通信，数据单向流动的特点

1、举个例子

3、解决办法

前话：把props中的fatehr数据赋予给另一个变量data，再把data挂在到页面中去。此时v-model下改变data值不会影响到father数据，也就不会报错（不会违背“单向流动的特点”）。

4、代码展示

父组件：

<template>
  <div>
    <son :father="name" />
    <input type="text" v-model="name" />
  </div>
</template>

<script>
import son from './components/son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      name: "无处安放的灵魂"
    }
  }
}
</script>

子组件：

<template>
    <div v-if="data">{{data}}
        <input type="text" v-model="data" />
    </div>
</template>

<script>
export default {
    props: {
        father: String
    },
    data() {
        return {
            data: this.father,
        }
    }
}
</script>

7、父组件给子组件传动态数据

在子组件中添加watch监听事件，监听父组件数据的更改，话不多说，见代码：

<template>
    <div>{{data}}
        <input type="text" v-model="data" />
    </div>
</template>

<script>
export default {
    props: {
        father: String
    },
    data() {
        return {
            data: this.father,
        }
    },
    watch: {    
        father() {
        this.data=this.father
        }
    }
}
</script>

8、众所周知，在编辑表单过程中，输入的数据会传入父组件的表格之中。也就是说在实际应用中会遇到在子组件获取父组件数据的同时，子组件数据的改变也会影响父组件数据。因此，怎么让这里的父组件数据随子组件数据改变而改变？

 

总结

未完待续。。。。。。