如何运用Vue自定义组件以及组件的传值

Vue自定义组件

引入组件

1. 首先在项目内的components新建.vue文件。

2. 创建完成之后搭建完整的框架。其实就是新建组件，在此之前，需要在VScode中引入一个插件（vue 2 snippets）,这个插件会让我们在打代码的时候少走一些弯路，他会给我们相应的提示。如下图
   
   
   
   name值一定要写对。

3. 在App.vue引入文件，注册组件。
   
   

4. 写组件，组件的名称就是文件名。

Vue的组件传值

Vue组件组件传值：父传子、子传父、子传子在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示:

1. 父传子

父组件

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

1. 子传父

子组件

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父组件

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

子传父的实现方式就是用了 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg

总结：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

1. 非父子

vue中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递。