第四章 VUE组件创建和使用（2）

在上节中，我们已经学会了简单vue组件的创建和使用，这里我们继续进行深入的学习vue组件的其他用法：父子组件相互传值的问题。
在实际开发项目中，我们引用的组件一般都会遇到动态改变功能模块里面的内容，比如网站的栏目，栏目我们可以做成功能的组件，但是我们在点击每个栏目的时候，在进入栏目的页面中，当前选中的栏目状态和其他栏目的样式不一样，如类似这样的效果

所以我们在引用组件的时候，更多我们需要改变组件的一些相关属性等。
我们先看下父组件向子组件传递数据的一个例子

这是头部组件 Header.vue

<template>
  <div>
    头部----- {{title}}
  </div>
</template>

<script>
    export default {
      data(){

      }
    }
</script>

我们现在想实现这样一种效果，如果Header.vue 在Index.vue里，{{ title }} 显示的内容为首页，在其他xxx.vue 里，{{ title }} 就显示其他的数据，那我们应该怎么做呢？这里就需要使用父组件Index.vue 向 Header.vue 传值。由于{{title}}在Header.vue里没有被定义过，那title 我们可以定义的它的父组件里。我们来看下父组件Index.vue

<template>
  <div>
    <v-head :title="title"></v-head>
  </div>
</template>

<script>
    import Header from '@/components/header.vue'

    export default {
        data(){
          return {
            title:'首页测试'
          }
        },
        components:{
          'v-head' : Header
        }
    }

</script>

<style>
</style>

在父组件Index.vue里， 中我们使用动态绑定 v-bind:title （或者简写 :title）来向子组件传递值，title的内容在export default 中被定义为 title:‘首页测试’ ；是不是这样就结束了呢？没有，我们还需要在子组件Header.vue里，使用props 来接收父组件传递过来的值，我们在看下被修改过的Header.vue

<template>
  <div>
    头部----- {{title}}
  </div>
</template>


<script>
    export default {
      data(){

      },
      props:['title']
    }
</script>

<style>
</style>

在子组件Header.vue里，我们使用了props 数组，来接收父组件传递过来的数据。
这样当我们给父组件title修改值的时候，同时子组件的title 也会跟着发生变化。这就是父组件向子组件传递参数的方式。