VS Code开启第一个VUE前端项目（4）

过了一个星期了，对Vue有了初步的认识，这里说一下Vue到底干嘛的。

Vue的作用是将所有的组件模块化，分在了以.vue结尾的文件中，内部的元素被<template></template>包裹，每个部分代表一个功能（也可以多个功能，单个功能会更友好，毕竟模块化了），对于这些vue文件，除了功能子模块外，还需要根模块，将多个分散模块组合到一起，变成一个完整的页面。

在每个模块构造时，难免会发生数据交换，模块的数据赋值，函数定义等等，这些是定义在<script></script>之间的js脚本部分，是每个模块独有的部分。每个模块脚本部分大致的内容可以体现为：

<script>
//引入其他vue模块，如下面一行代码，引入子模块组件
import child from './child.vue' 
//定义工具函数
function(){
}
export default {
  name:'',//名字
  data(){
    return {
       //变量数据的赋值
    }
  },
  components:{
       //组件的注册
  },
  methods:{
       //模块内，事件触发的私有方法
  },
  created(){
       //模块内，页面初始化方法，加载完成之前执行,执行顺序:父组件->子组件
  },
  mounted(){
       //模块内，页面初始化方法，加载完成后执行，执行顺序:子组件->父组件
  },
  computed:{
       //计算属性
  }
  watch:{
       //监听值（对data里面定义的变量进行监听）的变化，自定义函数进行处理
  },
  props:[
       //父模块传过来的数据（变量）
  ],
  
}
</script>

这里主要对props属性进行分析，对于模块间，最经常遇到的就是父模块与子模块的数据通信。在Vue中，子模块可以通过props属性获取到父模块传递过来的数据，子模块也可以通过this.$emit(parentFunction, params)来调用父模块的方法，这里有个坑。

父模块（parent.vue）代码：

<template>
  <div id="app">
    <input v-model="parentData"/>{{parentData}}
    <child :childData="childData" @changeParentData="updateParentData"></child>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  name:'parent',
  data(){
    return {
      parentData:"父亲给孩子的礼物",//父亲的数据
      childData:"孩子数据",        //给孩子的数据，需要在父模块中转递给孩子（子孩子可以自己定义
                                  //自己的数据，这里仅仅为了演示传递数据的过程，自孩子不定义
    }
  },
  components:{
    'child':child,//对child组件进行注册，以能够识别<child></child>标签
  },
  methods:{
    updateParentName(data){
      this.parentData = data.parentDate;
    },
  },
}
<script>

          子模块(child.vue)代码：

<template>
    <div>
        <h1>这里是孩子，接收到父亲的数据:{{childData}}</h1>
        <button @click='sendD("孩子改变父亲的数据")'>点击发送</button>
    </div>
</template>
<script>
export default {
    name:'child',
    props:["childData"],//用到了父亲传递过来的数据childData
    methods:{
        sendD(val){
            debugger;
            let data={
                parentDate : val
            };
            this.$emit('changeParentData',data);//函数可以触发父亲模块中的changeParentData函数，参数为data
        }
    }
}
</script>

这里需要注意一点，在parent.vue中，如下一行代码很重要：

<child :childData="childData" @changeParentData="updateParentName"></child>

重点：如果没有在<child></child>标签内部绑定数值和方法，那么，子孩子中就调用不了父亲的数据和方法，这就好比显性的传递，不能做到通过props属性直接拿到父组件的任何数据。