四、组件详解

作者: 让你变好的过程从来都不会很舒服 | 来源:发表于2022-10-12 18:04 被阅读0次

1、component组件

组件的本质：是一个构造函数 VueComponent，且不是程序员定义，是 Vue.extend 生成的

只需要写 <school/> 或 <school></school> ，Vue 就在解析式执行：new VueComponent(options)

帮我们创建 school 组件的实例对象

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <jiaqing v-for="item in items" v-bind:jia="item"></jiaqing>

</div>


<script>

    Vue.component("jiaqing",
        {
            props:["jia"],
            template:"<li>{{jia}}</li>"
        }
    );

    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","Linux","PHP"]
        }
    });

</script>

</body>
</html>