Javascript

060_Vue组件

本文主要是介绍060_Vue组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • 什么是组件
  • 第一个 Vue 组件
  • 使用 props属性传递参数

什么是组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
image.png
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

第一个 Vue 组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件,格式如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <hello></hello>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 定义一个vue组件
    Vue.component("hello",{
        template: '<li>Hello</li>'
    });

    var vm = new Vue({
        el: "#app"
    });
</script>

</body>
</html>

image.png
说明：

  • Vue.component()：注册组件
  • hello：自定义组件的名字
  • template：组件的模板

使用 props属性传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用 props属性了！
注意：默认规则下 props 属性里的值不能为大写；

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <hello v-for="item in items" v-bind:i="item"></hello>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 定义一个vue组件
    Vue.component("hello",{
        props: ['i'],
        template: '<li>{{i}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","linux","mysql"]
        }
    });
</script>

</body>
</html>

image.png
说明：

  • v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:i="item"：将遍历的item项绑定到组件中 props定义的名为i属性上；= 号左边的 i为 props定义的属性名，右边的为 item in items中遍历的item项的值
这篇关于060_Vue组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航