Vue.js学习笔记 第八篇 组件

全局注册组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-1">
        <global-component></global-component>
    </div>
    <script type="text/javascript">
        Vue.component('global-component', {
            template: '<div>一个自定义全局组件！</div>'
        })
        var vm1 = new Vue({
            el: '#app-1'
        })
    </script>
</body>
</html>

global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）

全局注册组件的语法格式为Vue.component(tagName, options)

全局注册的组件要在Vue实例化之前注册完成

局部注册组件

<div id="app-1">
    <local-component></local-component>
</div>
<script type="text/javascript">
    var localComponent = {
        template: '<div>一个自定义局部组件！</div>'
    }
    var vm1 = new Vue({
        el: '#app-1',
        // 局部注册的组件只能在父级模板中使用
        components: {
            'local-component': localComponent
        }
    })
</script>

Vue对象实例化时，第5个参数类型components(组件)

局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用

使用Props属性传参

<div id="app-2">
    <input v-model="content" placeholder="这里输入组件参数">
    <global-component v-bind:param="content"></global-component>
</div>
<script type="text/javascript">
    Vue.component('global-component', {
        props: ['param'],
        template: '<div>组件的参数：{{ param }}</div>'
    })
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            content: ''
        }
    })
</script>

组件可以通过props属性来实现传参

列表渲染在组件中使用

一个很好玩的例子，把完整的代码贴出来

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-3">
        <input 
            v-model="newTodoText"
            v-on:keyup.enter="addNewTodo"
            placeholder="输入一个等办事项"
        >
        <ul>
            <li
                is="global-component"
                v-for="(todo, index) in todos"
                v-bind:key="todo.id"
                v-bind:title="todo.title"
                v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>
    <script type="text/javascript">
        // 使用$on(eventName)监听一个事件
        // 使用$emit(eventName)触发一个事件
        Vue.component('global-component', {
            template: '\
                <li>\
                    {{ title }}\
                    <button v-on:click="$emit(\'remove\')">X</button>\
                </li>\
            ',
            props: ['title']
        })
        var vm3 = new Vue({
            el: '#app-3',
            data: {
                newTodoText: '',
                todos: [
                    { id: 1, title: '洗碗' },
                    { id: 2, title: '倒垃圾' },
                    { id: 3, title: '除草' },
                ],
                nextTodoId: 4
            },
            methods: {
                addNewTodo: function() {
                    this.todos.push({
                        id: this.nextTodoId++,
                        title: this.newTodoText
                    })
                    this.newTodoText = ''
                }
            }
        })
    </script>
</body>
</html>
posted @ 2017-12-19 17:18  TanSea  阅读(414)  评论(0)  编辑  收藏  举报