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

Posted 双子宫殿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于Vue.js学习笔记 第八篇 组件的主要内容，如果未能解决你的问题，请参考以下文章

Django学习笔记第八篇--实战练习四--为你的视图函数自定义装饰器

opencv学习笔记第八篇：输入输出XML和YAML文件

第八篇：Vue组件传参

开始写游戏 --- 第八篇

原生JavaScript第八篇

Python学习第八篇：requests 库学习