vue的组件是什么 ，以及组件之间如何传值。

什么是组件

组件是可复用的 Vue 实例，且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应对的组件即可。 

定义组件的方式

1 利用 Vue.component来创建全局组件

 

2 利用定义第一个对象，来接受 组件的信息 定义一个局部组件

组件间的传值 

传值方式 有 ：父组件向子组件传值，子组件向父组件传值，非关系组件传值。

父组件向子组件传值：

 <div id="app">
        <inp :item="person"></inp>
    </div>
    <script>
  
        Vue.component('inp', {
            props: ['cont',],
            template: `
              
                 <li><span>{{cont.name}}</span></li>
                   
            `,
        })
        var app = new Vue({
            el: "#app",
            data: {

                person: {
                    name: "haha",
                    age: 20
            }
           }
        })
    </script>

子组件向父组件传值：子组件通过this.$emit()来自定义一个方法名 (第一个参数为方法名，第二个参数是要传给父元素的值)

通过在子组件注册这个事件 然后父组件在方法里面来接受注册的这个事件等于的方法 。父组件方法接受的参数就是子组件传过来的参数

    <div id="app">
        <input type="text" v-model="nums">
        <inp @chuqu="jinlai"></inp>
    </div>
    <script>
        Vue.component('inp', {
            template: `<form><input @click="add" type="button" :value="num"/></form>`,
            data() {
                return {
                    num: 0,
                    num2: 3,
                }
            },
            methods: {
                add() {

                    this.num += 1;
                    this.num2 += 3;
                    this.$emit("chuqu", this.num)
                }
            },
        })

        var app = new Vue({
            el: "#app",
            data: {
                nums: 0

            },
            methods: {
                jinlai(num, num2) {
                    this.nums = num2

                }
            }
        })
    </script>

 

 非关系组件的传值：通过定义一个空的vue实列 在一个组件里面通过 实列.$emit来派发事件 然后另一个组件通过 实列.on来监听事件。

  data() {
                return {
                    name: {
                        name: '张海洋',
                        age: 20
                    },
                   
                }
            },

            methods: {
                addcart() {
                    event.$emit('add', name)
                      
                  
                }
            },
        };

  
            created() {

                event.$on('add', this.jia)
            },
            methods: {
                jia(obj) {
                   
                    console.log(obj)
                  
                },
                show() {
                    console.log(this.txt)

                }

            },