vue 组件的简单使用01

// 组件  自定义全局组件
    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>

vue 组件的简单使用01

猜你喜欢