// 组件  自定义全局组件

    Vue.component('mycom', {

        template: '<div v-on:click="count++">自定义组件 +{{myMessage}} {{MyTitle}} {{count}} childarry:{{myChildarry}} myInfo:{{myInfo}}</div>',

        // 在父组件中的写法必须是 my-Message（小写字母开始 + 与第一个大写字母之间必须有-，否则不生效）

        props: ['myMessage', 'MyTitle', 'myChildarry', 'myInfo'],

        // 组件中的data必须是函数

        //注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。

        // 这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，

        //所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

        // 而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了。

        data() {

            return {

                count:0

            }

        }

    });

 <div id="app30">

        <div>{{ parentArray }}</div>

        <!--my-Message  注意小写字母与大写字母之间的--->

        <!--1 、v-bind:my-Childarry  使用v-bind绑定的属性是一个动态属性，父组件的值发生变化时，子组件的值也将发生变化

            2、当父组件传递的属性是引用类型时，在子组件中更改相应的属性会导致父组件相应属性的更改。

             3、当父组件传递值为基本类型时，在子组件中更改这个属性会报错。正确的做法是，在父组件中绑定属性值时，加上.sync修饰符。

         -->

        <mycom my-Message="dasdasda" my-Info="infos" my-Title="112ewqdw" v-bind:my-Childarry="parentArray">111</mycom>

        <mycom my-Message="adadada"></mycom>

        <runoob></runoob>

    </div>

<script>

    new Vue({

        el: "#app30",

        data: {

            parentArray:'nhzheng'

        }

    });

</script>