vue进阶之“走进Vue组件”~~（超详细）

        在学java面向对象的时候，想必大家都听过这样一句话“万事万物皆对象”，如今我们来到vue的时候，也有这样一句话“万事万物皆组件”，所以本篇文章将带领大家详细了解vue中最重要的一部分“Vue组件”

目录

一、Vue组件的组成部分：

二、如何在项目中注册组件？

2.1 全局注册

2.2 本地注册

三、各组件之间的参数传递：

3.1 父传子

3.2 子传父

3.3 改进版参数传递

 一、Vue组件的组成部分：

        Vue组件的组成可以分为三部分；分别是<template></template>、<Script></Script>、<style></style>

<template>
  <div id="app">

  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
    },
    methods: {},
    computed: {},
    watch: {}
  }
</script>

<style>

</style>

二、如何在项目中注册组件？

2.1 全局注册：

        组件的全局注册，是在main.js中，通过import 和Vue.component配合，来将一个Vue文件注册成一个标签，从而达到全局使用的效果。步骤流程如下：

 2.2 本地注册：

        进行组件的本地注册的时候，是在app.vue文件中导入需要注册成组组件的文件，比如：import Header from‘./component/Header’,然后在app.vue的<script>标签中使用component属性进行组件的声明。具体代码示例如下：

<template>
  <div id="app">

    <MHeader></MHeader>
    
</template>

<script>
  import MHeader from './components/Header.vue'
  export default {
    name: 'app',
    data () {
    },
    components: {
      "MHeader": MHeader
    }

  }
</script>

<style>

</style>

注：本地注册标签的时候，只能在注册的文件中进行标签的使用

三、各组件之间的参数传值：

        在进行参数传递前呢，我们首先要了解一个属性的使用‘props’  ，props是表示一个组件的参数部分，props的写法有两种，分别如下：

1、props:[参数列表]，例如：props:[‘myTitle1’，‘myTitle2’]，就是在props里放了两个属性，来接收其他组件传递过来的值

//  第一种参数类表
props:[‘myTitle1’，‘myTitle2’]

2、props: { 'myHeaderTitle': { type: String, required: true, default: 'xxxxxx' }, 'btf':{ type:Function } }；该props表示定义了两个参数，分别是‘myHeaderTitle’，和‘btf’。其中myHeaderTitle表示的意思是：参数的类型是String，必须存在，当参数不存在时候默认值为‘xxxxxx’；btf参数表示的是，接收的参数是一个Function(函数类型)

/    第二种
    props: {
      'myHeaderTitle': {
        type: String,
        required: true,
        default: 'xxxxxx'
      },
      'btf':{
          type:Function
      }
    }

3.1 父传子

        各组件之间的传值--父传子，是在子组件中通过props属性来定义需要接收值的属性，通过插值表达式获取vue对象中的属性值（属性值来自于data、computed、props），其中props里放的是其他组件传递过来的值，在父标签中通过使用在标签中写明参数的键值对来传递参数。流程如下：

 

3.2 子传父 

        子传父这种方式是比较复杂的一种传参方式，将采取分开梳理的方式，分别对子、父标签进行讲解以及整体梳理

        子标签： 子标签中的props中定义了一个两个属性；分别是‘myHeaderTitle’，‘btf’，在子标签中对myHeaderTitle中的值进行页面展示。然后是在子标签中的定义了一个‘按钮’，当点击的时候调用btf函数，将btf函数声明在props标签中。代码如下：

<template>
  <div id="app">
    <!--{{msg}}-->
    <h1>我是header</h1>
    {{myHeaderTitle}}

    <button @click="btf('hello java')">点我</button>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
//  第一种参数类表
//      props:['myHeaderTitle'] /
//    第二种
    props: {
      'myHeaderTitle': {
        type: String,
        required: true,
        default: 'xxxxxx'
      },
      'btf':{
          type:Function
      }
    }
  }
</script>

<style>

</style>

            父标签：父标签中通过使用子标签对值分别进行接收传递

<template>
  <div id="app">

    <myHeader :myHeaderTitle="msg" :btf="mybtn"></myHeader>
  </div>
</template>

<script>
  import MHeader from './components/Header.vue'
  export default {
    name: 'app',
    data () {
      return {
        msg:'myHeaderTitlemyHeaderTitlemyHeaderTitlemyHeaderTitle'
      }
    },
    methods:{
        mybtn:function (inf) {
          this.msg=inf;
        }
    }
  }
</script>

<style>

</style>

        代码块执行流程如下：

 在按钮未点击之前执行的是一个父传子的过程，在按钮点击后执行的是子传父过程，然后修改myHeaderTitle的值回显到页面上

3.3 改进版参数传递

        改进版参数传递是以事件发射的方式来实现子传父的效果，通过在子组件中使用this.$emit(“键”，“值”)，在父组件中使用的子标签中使用@键=‘msg=$event’,其中$event就能得到子组件传的值，msg是父组件中的属性。

        子标签定义如下：

<template>
    <div id="app">
      <button @click="DoClick">我是content,点我</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
      methods:{
        DoClick(){
            this.$emit("newName","小王")
        }
      }
    }
</script>

<style>

</style>

        父组件定义如下：

<template>
  <div id="app">

    <!--改进版参数传递-->
    <myContext @newName="msg=$event"></myContext>
  </div>
</template>

<script>
  import MHeader from './components/Header.vue'
  export default {
    name: 'app',
    data () {
      return {
        msg:'myHeaderTitlemyHeaderTitlemyHeaderTitlemyHeaderTitle'
      }
    }
  
  }
</script>

<style>

</style>