1-10 vue全局组件和局部组件
分类:计算机教程

外部引入

vue全局组件和局部组件

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/vue-2.5.16.js"></script>

Vue.js的组件化思想 —— 上

HTML部分

一、Vue中的组件

  • Vue视图层的灵魂 —— 组件化

图片 1

vuea7.png

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

  • 全局组件的创建和注册

图片 2

vuea11.png

  • 案例代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
    <script src="js/vue.js"></script>
    <script>
        // 1. 创建组件构造器
        var Profile = Vue.extend({
            template: '<h1>我是自定义组件</h1>'
        });
    
        // 2. 注册组件, 指定组件的名称
        Vue.component('my-component', Profile);
    
        new Vue({
            el: '#app'
        })
    </script>
    </body>
    </html>
    

调用Vue.extend()创建的是一个组件构造器,构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML;

调用Vue.component()注册组件时,需要提供2个参数:组件的标签名 和 组件构造器;注册的组件要挂载到某个Vue实例下,否则它不会生效;

Vue.extend() 和 Vue.component():由于 Vue 本身是一个构造函数,Vue.extend() 是一个类继承方法,它用来创建一个 Vue 的子类并返回其构造函数。

而Vue.component() 的作用在于:建立指定的构造函数与 ID 字符串间的关系,从而让 Vue.js 能在模板中使用它;直接向 Vue.component() 传递 options 时,它会在内部调用 Vue.extend()。

  • 局部组件的创建和注册

    • 案例代码

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>注册局部组件</title>
      </head>
      <body>
          <div id="root">
              <my-component></my-component>
          </div>
          <div id="root2">
              <my-component></my-component>
          </div>
      <script src="js/vue.js"></script>
      <script>
          // 1. 创建组件构造器
          var Profile = Vue.extend({
              template: '<li>创建局部组件!</li>'
          })
          new Vue({
              el: '#root',
              components: {
                  'my-component': Profile
              }
          })
          new Vue({
              el: '#root2'
          })
      </script>
      </body>
      </html>
      
  • 另一种组件创建和注册方式

    • 直接通过Vue.component注册或获取全局组件,主要体现在以下几种方式:

      // 注册组件,传入一个扩展过的构造器
      Vue.component('my-component', Vue.extend({ /* ... */ }))
      // 注册组件,传入一个选项对象(自动调用 Vue.extend)
      Vue.component('my-component', { /* ... */ })
      // 获取注册的组件(始终返回构造器)
      var MyComponent = Vue.component('my-component')
      
    • 自定义全局组件

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
        <div id="app">
            <my-component></my-component>
        </div>
      <script src="js/vue.js"></script>
      <script>
          Vue.component('my-component', {
              template: '<h1>自定义全局组件</h1>'
          })
          new Vue({
              el:'#app'
          })
      </script>
      </body>
      </html>
      
    • 自定义局部组件

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
      </head>
      <body>
      <div id="app">
          <my-component1></my-component1>
          <my-component2></my-component2>
      </div>
      <script src="js/vue.js"></script>
      <script>
          var app = new Vue({
              el: '#app',
              components: {
                  'my-component1': {
                      template: '<h1>局部组件1!</h1>'
                  },
                  'my-component2': {
                      template: '<h2>局部组件2!</h2>'
                  }
              }
          })
      </script>
      </body>
      </html>
      
 <div class="container">
   <!--动态数据绑定-->
   <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>
   <!--静态数据绑定-->
   <my-info data="操作有误"></my-info>
 </div>

script部分

<script type="text/javascript">
   Vue.component('my-info',{
   template:`
     <transition leave-active-class="animated fadeOutUpBig">
     <div
       v-show='isShow' 
       style="background:orange;
          color:#fff;
          padding:.5em 1em; 
          border-radius:5px; 
          margin:.5em 0; 
          position:relative">
       <i class="fa fa-info-circle"></i>
       {{data}}
       <i @click='close' class="fa fa-close" 
        style="position:absolute; 
           right: 1em;
           cursor:pointer"></i>
     </div>
     </transition>
     `,
     //注意:data必须是一个函数
     data(){
       return {
       isShow:true
       }
     },
     props:['data'],
     methods:{
       close(){
       //子组件向父组件发射事件
       this.$emit('close');
       //关闭消息框
       this.isShow = false;
       }
     },
   });
   new Vue({
     el:'.container',
     data:{
       msg:'添加失败!'
     },
     methods:{
       closeHandler(){
       console.log('关闭了');
       }
    }
  });
 </script>

效果

图片 3

全局组件

组件的创建和注册分成3步:创建组件构造器,注册组件,挂载作用域内实例化

例如:

<div id="app">
  <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
  <my-component></my-component>
</div>
<script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
    template: '<div>这是我的全局组件</div>'
  })

  // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
  Vue.component('my-component', myComponent)

  new Vue({
    el: '#app'
  });
</script> 

我们来理解组件的创建和注册:

本文由美洲杯赔率发布于计算机教程,转载请注明出处:1-10 vue全局组件和局部组件

上一篇:剖析 【美洲杯赔率】rudy 访问控制 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 剖析 【美洲杯赔率】rudy 访问控制
    剖析 【美洲杯赔率】rudy 访问控制
     前面,我们说Ruby没有函数,只有方法.而且实际上有不止一种方法.这一节我们介绍访问控制(access controls).   局部变量由小写字母或下划线(_)开头.局部变量
  • ruby 存取器 概念
    ruby 存取器 概念
     前面一节的 Fruit 类有两个实变量,分别表述水果的类型和状态.直到为这个类写了一个定制的inspect方法,我们方才了解它不会对一个缺乏属性的水果做出合
  • thinkphp美洲杯赔率: 内置字符串截取函数
    thinkphp美洲杯赔率: 内置字符串截取函数
    在thinkphp模板引擎里可以这样写:{$vo.title|msubstr=0,5,’utf-8′,false} thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便。调用函数也一样,
  • 新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(
    新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(
    % @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"     Inherits="Overview_Sample" Title="最简单的示例" % asp:Content ID="Content1" 
  • JavaScript 多级联动select
    JavaScript 多级联动select
    请到这里看09-08-18更新版本 能够根据自定义的菜单数据和select,自动设置联级的下拉菜单,可定义默认值。 类似的多级浮动菜单网上也很多实例,但大部分