Loading

Vue 系列之 组件

一个简单的 TodoList

<body>
    <div id="root">
        <div>
            <input type="text" v-model="todo">
            <button @click="handleSubmit">Submit</button>
            <ul>
                <li v-for="(item, index) in items" :key="index">{{item}}</li>
            </ul>
        </div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                todo: "hello",
                items: []
            },
            methods: {
                handleSubmit: function () {
                    this.items.push(this.todo)
                    this.todo = ""
                }
            }
        })
    </script>
</body>

往数组里面添加元素使用 push 方法,删除使用

组件

全局组件

<body>
    <div id="root">
        <input type="text" v-model="todo">
        <button @click="handleSubmit">Submit</button>
        <ul>
            <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
        </ul>
    </div>
    <script>

        Vue.component("todo-item", {
            props: ["content"],
            template: "<li>{{content}}</li>"
        })

        new Vue({
            el: "#root",
            data: {
                todo: "",
                items: []
            },
            methods: {
                handleSubmit: function () {
                    this.items.push(this.todo)
                    this.todo = ""
                }
            }
        })
    </script>
</body>

局部组件

<body>
    <div id="root">
        <input type="text" v-model="todo">
        <button @click="handleSubmit">Submit</button>
        <ul>
            <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
        </ul>
    </div>
    <script>

        var todoItem = {
            props: ["content"],
            template: "<li>{{content}}</li>"
        }

        new Vue({
            el: "#root",
            data: {
                todo: "",
                items: []
            },
            components: {
                "todo-item": todoItem,
            },
            methods: {
                handleSubmit: function () {
                    this.items.push(this.todo)
                    this.todo = ""
                }
            }
        })
    </script>
</body>

组件与实例的关系


<body>
    <div id="root">
        <input type="text" v-model="todo">
        <button @click="handleSubmit">Submit</button>
        <ul>
            <todo-item v-for="(item, index) in items" :key="index" :content="item"></todo-item>
        </ul>
    </div>
    <script>

        var todoItem = {
            props: ["content"],
            template: "<li @click='handleClick'>{{content}}</li>",
            methods: {
                handleClick: function () {
                    alert(1111)
                }
            }
        }

        new Vue({
            el: "#root",
            data: {
                todo: "",
                items: []
            },
            components: {
                "todo-item": todoItem,
            },
            methods: {
                handleSubmit: function () {
                    this.items.push(this.todo)
                    this.todo = ""
                }
            }
        })
    </script>
</body>

Vue程序 是由众多的 vue实例 构建而成的。对于根实例,对应的模板是挂载点下所有的 Dom 节点;

组件的 data 必须是一个函数

一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data: function () {
  return {
    count: 0
  }
}

事件的发布与订阅

<body>
    <div id="root">
        <input type="text" v-model="todo">
        <button @click="handleSubmit">Submit</button>
        <ul>
            <!--订阅事件-->
            <todo-item @delete="handledelete" v-for="(item, index) in items" :key="index" :content="item" :index="index"></todo-item>
        </ul>
    </div>
    <script>

        var todoItem = {
            props: ["content", "index"],
            template: "<li @click='handleClick'>{{index}} - {{content}}</li>",
            methods: {
                handleClick: function () {
                    //发布事件
                    this.$emit('delete', this.index)
                }
            }
        }

        new Vue({
            el: "#root",
            data: {
                todo: "",
                items: []
            },
            components: {
                "todo-item": todoItem,
            },
            methods: {
                handleSubmit: function () {
                    this.items.push(this.todo)
                    this.todo = ""
                },
                //实现事件
                handledelete: function (index) {
                    this.items.splice(index)
                }
            }
        })
    </script>
</body>

通过 发布-订阅 模式进行组件间的数据传递和事件通知;

posted @ 2018-09-16 18:32  hippieZhou  阅读(264)  评论(0编辑  收藏  举报