首页 > 其他 > 详细

vue组件理解

时间:2021-06-02 17:45:16      阅读:21      评论:0      收藏:0      [点我收藏+]

vue组件

为何需要组件?

组件的目的是为了复用,如下图最顶上的相当于最外层的div,第二层相当于div中的3个矩形框,每个大矩形框中又包含2个和3个组件(通常我们看一个官网,最顶上的导航栏和底部的联系栏通常都不会改变,只有中间的内容部门在发生变化,那这些公共的组件就可以抽离出来应用于所有页面)
说白了就是一些可复用的模板
技术分享图片

如何定义组件?

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>java</title>
</head>
<body>
<!--view层-->
<div id="app">
	<!--使用自定义组件,从原始组件遍历出数据,再将数据使用v-bind绑定到一个临时变量,再将变量传给自定义组件的props,进而实现组件之间的传参-->
    <huangxb v-for="item in langs" v-bind:yuyan="item"></huangxb>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	<!--定义一个组件:1)包含组件名,2)template模板,模板中就是我们的页面,vue的第一部分-->
	<!--使用props接收传递的数据-->
    Vue.component("huangxb",{
        props: [‘yuyan‘],
        template: ‘<li>{{yuyan}}</li>‘
    });
    var vm = new Vue({
        // Model:数据
        el: "#app",
        data: {
            langs: ["C++","JAVA","C","Object-C"]
        }
    });
</script>
</body>
</html>

结果

技术分享图片

总结

自定义组件和初始组件之间属于同级关系,要想在他们之间传递参数需要使用一个中间变量,使用v-bind进行绑定。

vue组件理解

原文:https://www.cnblogs.com/yuruotianxin/p/14841668.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!