vue2.0组件的理解和组件间父子组件通信

1：组件

 01-先讲一下组件的理解（个人的理解）

比如生活中常见的求职过程，A公司要进行招聘，满怀期望的人才们，进行简历的登记。我们都知道简历登记去填写一些个人的信息，当人才们所拿到的报表就会发现统一的形式，此时可理解为这个报表为一个组件。

 02-看一下vue官方文档的说明

2：组件间的通信（父子组件）自定义属性

我们看一下一个小页面：

非常的简洁：（父）页面只有输入框还有按钮 ，接下来给输入框输入值点击按钮传值到子组件

 

上图效果已经出现了，接下来我们进行解析一下。

 父页面代码

 <div>组件的使用</div>
  <input v-model="inputValue">
  <button @click="handleBtn">传递我当前输入框的值</button>
  <div>子组件的显示</div>
  <div v-if="this.inputValue && this.inputValue.length">
    <title-size :sendValue="sendValue" @callBackValue="callBackValue"/>
  </div>

</template>

<script>
import titleSize from "@/components/titleSize";
export default {
  name:'nameIndex',
  components:{titleSize},
  data() {
    return {
        sendValue:{
          inputValue:''
        },
       inputValue:''
    }
  },
  methods:{
    handleBtn(){
      this.$nextTick(()=>{
        this.sendValue = {
          ...this.sendValue,
          inputValue:this.inputValue
        }
      })
    },
    callBackValue(val){
      this.inputValue =  val
    }
  }
}

上面代码中 有一个子组件titeSize ，当我们将按钮传值时，子组件中有一个自定义属性sendValue它的值是sendValue，父页面传递完之后子页面要进行接受（props）

子页面代码

<template>
  <div>
    <div class="titleTop">
      <div class="content" >
        {{dataContent}}
      </div>
    </div>
    <div>
      <input v-model="dataContent">
      <div>我来操作数据</div>
      <button @click="hanldClick">修改数据</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexTitle",
  props:{
    sendValue:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return{
      dataContent:null
    }
  },
  mounted() {
    if (this.sendValue) {
      this.getValue()
    }
  },
  methods:{
    getValue(){
      const  {inputValue} = this.sendValue
      this.dataContent = inputValue
    },
    hanldClick(){
      this.$emit('callBackValue',this.dataContent)
    }
  },
  watch:{
    'sendValue':function (){
      this.getValue()
    }
  }
}

我们看到子页面会用props去接受值后续进行一些操作 。

然后反过来子页面接受到值想修改我们通过自定义方法  $emit ('传递子组件的方法'，'传递子组件的值')

看一下效果图：

 总结一下

 首先我们明确是那种方式去传值.

01：父向子 => 是通过自定义属性，子组件通过props接受

02:  子向父 => 是通过自定义方法，子组件通过$emit形式传递