Vue.js入门学习--组件的注册和使用（二）-优快云博客

本文通过具体示例展示了Vue.js中组件的使用方法，包括如何定义和使用简单的组件，以及如何通过属性传递实现组件间的交互。

<html>

<head>
    <title>由组件组合而成的应用程序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <ol>
            <!-- 创建一个 todo-item 组件的实例 其实就是一个li标签，我们发现内容一样 -->
            <todo-item v-for="todo in todos"></todo-item>
        </ol>
    </div>
    <br/>
    <br/>
    <div id="app2">
        <ol>
            <!-- 创建一个 todo-li 组件的实例 并绑定组件的todo属性和key值,区分组件-->
            <todo-li v-for="todo in todos" v-bind:todo ='todo' v-bind:key="todo.id"></todo-li>
        </ol>
    </div>
</body>
<script>
    // 定义一个被命名为 todo-item 的新组件 组件的数据模板，渲染的内容清一色的一样
    Vue.component('todo-item', {
        template: '<li>这是一个 todo 项</li>'
    })

    Vue.component('todo-li', {
        // todo-li 组件现在接受一个 "prop"，
        // 类似于一个自定义属性。
        // 此 prop 名为 todo，props里也可以定义多个prop。
        props: ['todo'],
        //双向绑定
        template: '<li>{{todo.text}}</li>'
    })
    var app = new Vue({
        el: "#app",
        data: {
            todos: [{
                    text: ''
                },
                {
                    text: ''
                },
                {
                    text: ''
                }
            ]
        }
    })

    var app2 = new Vue({
        el: "#app2",
        data: {
            todos: [{
                    text: 'Python3学习',id:0
                },
                {
                    text: 'Spring-Boot学习',id:1
                },
                {
                    text: 'Vue.js学习',id:2
                }
            ]
        }
    })
</script>

</html>

浏览器直接走一波：