VUE的组件DEMO

组件的基本写法可以如下：

HTML：

 <div id="components-demo">
        <button-counter self-data="this is my template"></button-counter>
    </div>

JS：

// 定义一个名为 button-counter 的新组件
    var ComponentA = {
        //父组件传递过来的数据
        props:['selfData'],
        template: '<button>{{selfData}}</button>'
    };

    new Vue({
        el: '#components-demo',
        components: {
            'button-counter': ComponentA
        }
    });

更灵活的写法如下：

HTML:

<!--props：父dom把数据传递给子DOM组件的属性-->
    <!--$emit：子组件通过这个关键字方法可以调用父DOM的方法-->
    <!--slot-scope：子组件属性传递到父DOM，使用此关键字进行接收后可以展示其中的属性值-->
    <!--原则：组件和父DMO是单向的，即，父属性的修改会影响到子属性，但是子属性的修改不可以影响父属性和双向绑定的定义还有一点差异-->
    <div id="testList">
        <ul scope="tt">
            <!--user这样的自定义数据属性除了使用v-bind以外，还可以简写为:user="item"-->
            <test-list-template v-on:getname="ShowName" v-for="item in users" v-bind:user="item" >
                <!--作用域插槽必须添加template，v2.5版本推荐使用slot-scope，之前的版本使用scope-->
                <!--这里的userinfo就是slot这个插件所传递过来的对象，这个对象可以调用插槽中自定义的属性的值，例如userinfo.username和userinfo.userid-->
                <template slot="test-list-name" slot-scope="userinfo">
                    <label>ID：{{userinfo.userid}}，姓名：{{userinfo.username}}，年龄：</label>
                </template>
            </test-list-template>
        </ul>
    </div>

JS:

<script type="text/template" id="test1">
    <!--这样的写法是模板复用的写法，不需要带template这样的标签套在外面，否则会报错-->
    <li v-on:click="SendMsg(user)" >
        <slot name="test-list-name" :userid="user.id" :username="user.name"></slot>{{user.age}}
    </li>
</script>

<script>

    Vue.component('test-list-template', {
        //user,父组件传递来的数据
        props: ['user'],
        //子组件模板，这个模板又通过子组件定义的方法调用了父组件的方法
        template: '#test1',
        methods: {
            SendMsg: function (user) {
                //第一个是父组件的方法名，第二个是传递的参数，父组件对应的是v-on:getname,这个getname是父组件的方法名
                this.$emit('getname', user);
            }
        }
    });

    new Vue({
        el: '#testList',
        data: {
            users: [
                    { id: 1, name: '张三', age: 20 },
                    { id: 2, name: '李四', age: 22 },
                    { id: 3, name: '王五', age: 27 },
                    { id: 4, name: '张龙', age: 27 },
                    { id: 5, name: '赵虎', age: 27 }
            ]
        },
        methods: {
            ShowName: function (data) {
                //data,来自于父组件
                alert('this is a ' + data.name);
            }
        }
    });
</script>