Vue自定义组件与Vue组件组件传值

一、Vue自定义组件

组件是可复用的 Vue 实例，且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应对的组件即可。
1.在项目的components里面新建一个组件
（建议组件名字大写 防止与标签相撞）

2.在组件.vue的script里面写上name

3. 在app.vue里面导入 app.vue属于全局配置
js中先引入组件

4.引用完一定记得有使用 不然会报错 在template里面使用一下组件

二、Vue组件组件传值

图解：

1.父传子
父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。
①使用props建立数据通道的渠道

// 这是父组件
<div id="app">
// 这是子组件
    <child message="hello" ></child>
</div>

②在子组件中通过props传递过来的数据

Vue,component('child',{
    props:['message'] 
})

2.子传父
子组件可以通过$emit触发父组件的自定义事件。vm.$emit(event,arg) 用于触发当前实例上的事件；
①子组件中需要一个点击事件触发一个自定义事件

<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>

3.非父子传值
非父子组件之间传值，需要一个公共的vue来进行传递值和获取值，作为中间仓库来传值，不然路由组件之间达不到传值的效果