专栏首页codingvue 组件基本使用

vue 组件基本使用

组件是可复用的 Vue 实例,且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用

全局组件

<div id="app">
    <!-- 使用组件的方式:将组件名作为标签名 -->
    <mycomponent></mycomponent>
    <!-- 组件可任意次数调用 -->
    <mycomponent></mycomponent>
</div>
<script>
    Vue.component('mycomponent', {
        template: '<h2>自定义的全局组件</h2>'
    })
    var app = new Vue({
        el: '#app',
    })
</script>

上面代码中我们直接使用 Vue.component() 方法定义了组件,而这个 mytemp 组件可以用在所有 vue 实例中,这种组件被称为 全局组件

私有组件

在具体的某个vue实例中,也可以定义组件,但是组件仅会在具体的 vue 实例中起作用,这种组件被称为 局部(私有)组件

<div id="app">
    <!-- 使用组件的方式:将组件名作为标签名 -->
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <!-- 不起作用 -->
    <mycomponent></mycomponent>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            mycomponent: {
                template: '<h2>自定义的全局组件</h2>',
            }
        }
    })
    var app2 = new Vue({
        el: "#app2",
    })
</script>

注意

组件名如果是驼峰法命名,使用组件时要将大写字母改为小写,并且在前面加上 -

组件中的 template 属性必须有一个唯一的根元素,否则会报错

    <div id="app">
        <!-- 大写字母应用 - 隔开 -->
        <my-component></my-component>
        <!-- 用小写不起作用 -->
        <mycomponent></mycomponent>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            // 该实例的私有组件
            components: {
                myComponent: {
                    template: '<h2>自定义的全局组件</h2>',
                }
            }
        })
    </script>

组件使用实例

三栏布局

image

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <style>
    .top {
      height: 50px;
    }
    .left, .right {
      float: left;
      height: 300px;
      width: 50%;
    }
  </style>

<div id="app">
  <top></top>
  <left></left>
  <right></right>
</div>

<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            top: {
                template: '<div class="top bg-primary"></div>'
            },
            left: {
                template: '<div class="left bg-success"></div>'
            },
            right: {
                template: '<div class="right bg-warning"></div>'
            },
        }
    })
</script>

源码

组件中的数据及方法

组件是带有名字的可复用的 Vue 实例 ,所以它们与 new Vue 实例对象接收相同的参数选项 datacomputedwatchmethods , 但 el例外;

虽然组件和实例对象可以接收相同的参数选项,但在具体使用中,vue 实例对象的 data 与组件中的 data 还是有差异的, 在自定义的组件中,data 必须是一个函数

<div id="app">
    <my-component></my-component>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            myComponent: {
                // 组件中的data必须是一个函数
                data: function(){
                    return {msg: '点我啊'}
                },
                methods: {
                    clickme() {
                        alert('点了');
                    }
                },
                template: '<div @click="clickme">{{ msg }}</div>'
            }
        }
    })
</script>

vue实例也是组件

通过 new Vue() 可以得到一个实例对象,其实这个实例对象就是一个特殊的组件,也有 template 参数,也可以当做组件来使用

<div id="app">
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据'
        },
        template: '<h2>组件</h2>'
    })
</script>

上面的代码中直接为Vue 实例对象传入了 template 参数,那么 vue 会使用template中的数据替换 el 选中的整个 DOM 节点 , 因此 data 选项中的的数据也不会绑定,因为在绑定数据之前,整个 DOM 节点包括节点中 {{msg}} 都会被替换;如果想让数据正常绑定,我们可以在 template 数据中加入 {{msg}}

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '数据'
            },
            template: '<h2>组件{{ msg }}</h2>'
        })
    </script>

原文:https://www.itshutong.com/238.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • swoole创建tcp服务器tcp server使用telnet连接自定义 tcp client

    章鱼喵
  • 事件修饰符

    章鱼喵
  • vue 通过 prop 向子组件传递数据

    运行上面的代码,我们发现,组件 my-component 并不能获取实例中 data 的数据,这是因为组件与组件之间都拥有各自独立的作用域

    章鱼喵
  • (第二季)Vue2.0-全局API

    全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

    楠楠
  • Vue—前端框架

    3、在外部可以通过vue对象名.属性的方式获取属性值,在vue对象内部,通过this.属性的方式获取属性值

    nbsp-nbsp
  • jQuery

    jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifen...

    coders
  • jDate移动端用法

    前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与pc端类似;

    祈澈菇凉
  • Python爬虫:现学现用xpath爬取豆瓣音乐

    爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能

    叫我龙总
  • scrollTop与offsetTop研究

    虽然我是做后台出身的,但最近心血来潮越来越关注前台技术了^_^,前二天看了“司徒正美”先生的图片无缝滚动分析后,对于scrollTop和offsetTop这二个...

    菩提树下的杨过
  • 爬虫篇 | Python现学现用xpath爬取豆瓣音乐

    最近整理一个爬虫系列方面的文章,不管大家的基础如何,我从头开始整一个爬虫系列方面的文章,让大家循序渐进的学习爬虫,小白也没有学习障碍.

    叫我龙总

扫码关注云+社区

领取腾讯云代金券