vue-component

最新推荐文章于 2024-03-26 09:34:06 发布
最新推荐文章于 2024-03-26 09:34:06 发布
阅读量1w 收藏 6
点赞数
分类专栏： hadoop生态组件 Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25371579/article/details/78476990
版权

vue-component

vue组件简介

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树

All text

什么是组件

组件可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。

组件的创建和注册

基本步骤

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件

All text

示例

component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>
      <div id="component-test">
        <!-- 3.#component-test是Vue实例挂载的元素，应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </div>
    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var myComponent = Vue.extend({
  template: '<div style="font-family:微软雅黑;">This is matrix first component</div>'
})

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

// 3.创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
    el: '#component-test',
})

运行示例

npm run dev

发布

npm run build

运行结果

使用组件和使用普通的HTML元素没什么区别

All text

理解组件的创建和注册

1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器
2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML
3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器
4. 组件应该挂载到某个Vue实例下，否则它不会生效

注意点：以下代码在3个地方使用了标签，但只有#component-test1和#component-test2下的标签才起到作用

component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>
      <div id="component-test1">
        <!-- 3.#component-test是Vue实例挂载的元素，应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </div>

      <div id="component-test2">
        <!-- 3.#component-test是Vue实例挂载的元素，应该在挂载元素范围内使用组件 -->
        <matrix-component></matrix-component>
      </div>

      <!--该组件不会被渲染-->
      <my-component></my-component>
    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var myComponent = Vue.extend({
  template: '<div style="font-family:微软雅黑;">This is matrix component</div>'
})

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

// 3.创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var component1 = new Vue({
    el: '#component-test1',
})

var component2 = new Vue({
    el: '#component-test2',
})

运行示例&发布

npm run dev
npm run build

运行结果

All text

全局注册和局部注册

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册

上面的示例可以改为局部注册的方式

local_component.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="src/assets/logo.png" />
        <title>vue-simple-demo</title>
    </head>
    <body>

      <div id="local_component">
        <!-- #local-component是Vue实例挂载的元素，应该在挂载元素范围内使用组件 -->
        <local-component></local-component>
      </div>

    </body>
    <script src="/dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 1.创建一个组件构造器
var localComponent = Vue.extend({
  template: '<div style="font-family:微软雅黑;">This is matrix local component</div>'
})

var local_component = new Vue({
    el: '#local_component',
    components: {
      // 2. 将localComponent组件注册到Vue实例下
      'local-component' : localComponent
    }
})

运行示例&发布

npm run dev
npm run build

运行结果

All text

父组件、子组件

cmd/parent.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <title>父组件、子组件</title>
        <style type="text/css">
          *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
          }
          #parent_data{
            width: 50%;
            margin:100px auto;
          }
        </style>
    </head>
    <body>
        <!--View-->
        <div id="parent_data">
            <parent-component></parent-component>
        </div>
    </body>
    <script src="../dist/build.js"></script>
</html>

注意：vue2.0要求每个template只能有一个根元素

src/main.js

import Vue from 'vue'

// 父组件、子组件
var Child = Vue.extend({
  template: '<p>This is child component！</p>'
})

var Parent = Vue.extend({
  // 在Parent组件内使用<child-component>标签
  template:'<div><p>This is a Parent component</p><child-component></child-component></div>',
  components: {
    // 局部注册Child组件，该组件只能在Parent里使用
    'child-component': Child
  }
})

// 全局注册Parent组件
Vue.component('parent-component',Parent)

// 注册Vue实例
new Vue({
  el:'#parent_data'
})
var Child = Vue.extend(...)定义了Child组件构造器
var Parent = Vue.extend(...)定义了Parent组件构造器
components: { 'child-component': Child }，将Child组件注册到Parent组件，并将Child组件的标签设置为child-component
template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent组件内以标签的形式使用Child组件
Vue.component('parent-component', Parent) 全局注册Parent组件
在页面中使用<parent-component>标签渲染Parent组件的内容，同时Child组件的内容也被渲染出来

All text

Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用
请注意下面两种子组件的使用方式是错误的：

以子标签的形式在父组件中使用

<div id="app">
    <parent-component>
        <child-component></child-component>
    </parent-component>
</div>
为什么这种方式无效呢？

因为当子组件注册到父组件时，Vue会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML

<parent-component>…</parent-component>相当于运行时，它的一些子标签只会被当作普通的HTML来执行
<child-component></child-component>不是标准的HTML标签，会被浏览器直接忽视掉

在父组件标签外使用子组件

<div id="app">
    <parent-component>
    </parent-component>
    <child-component>
    </child-component>
</div>
运行这段代码，浏览器会提示错误

运行示例&发布

npm run dev
npm run build

运行结果

All text

组件注册语法糖

以上组件注册的方式有些繁琐，Vue为了简化这个过程，提供了注册语法糖

使用Vue.component()直接创建和注册组件

// 全局注册，my-component是标签名称
Vue.component('my-component',{
    template: '<div>This is the first component!</div>'
})

var vm1 = new Vue({
    el: '#app'
})
Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，

使用选项对象的template属性定义组件模板

使用这种方式，Vue在背后会自动地调用Vue.extend()

在选项对象的components属性中实现局部注册

var vm2 = new Vue({
    el: '#app2',
    components: {
        // 局部注册，my-component2是标签名称
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注册，my-component3是标签名称
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

使用script或template标签

尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性
庆幸的是，Vue提供了两种方式将定义在JavaScript中的HTML模板分离出来

使用script标签

cmd/script.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <title>使用Script标签</title>
        <style type="text/css">
          *{
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-family: "微软雅黑";
          }
          #script_data{
            width: 50%;
            margin:100px auto;
          }
        </style>
    </head>
    <body>
        <!--View-->
        <div id="script_data">
            <content-component></content-component>
        </div>

        <script type="text/x-template" id="contentComponent">
            <div>This is a component！</div>
        </script>
    </body>
    <script src="../dist/build.js"></script>
</html>

src/main.js

import Vue from 'vue'

// 使用script语法，分离在Js中的HTML
// 全局注册组件
Vue.component('content-component',{
  template: '#contentComponent'
})

// 注册Vue实例
new Vue({
  el: '#script_data'
})
template选项现在不再是HTML元素，而是一个id，Vue根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译

运行示例&发布

npm run dev
npm run build

运行结果

All text

组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend()或Vue.component()中

不过有两个特例：data和el

Vue规定：在定义组件的选项时，data和el选项必须使用函数

下面的代码在执行时，浏览器会提出一个错误
Vue.component('my-component', {
    data: {
        a: 1
    }
})

All text

另外，如果data选项指向某个对象，这意味着所有的组件实例共用一个data

我们应当使用一个函数作为 data 选项，让这个函数返回一个新对象
Vue.component('my-component', {
    data: function(){
        return {a : 1}
    }
})

使用props

组件实例的作用域是孤立的
这意味着不能并且不应该在子组件的模板内直接引用父组件的数据
可以使用 props 把数据传给子组件

父组件是如何将数据传给子组件的？

All text

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>component props</title>
    <link rel="shortcut icon" href="../src/assets/logo.png" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>

  <!-- 将父组件数据通过已定义好的props属性传递给子组件 -->
  <div id="app">
      <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
  </div>
  <template id="myComponent">
      <!-- <Table border :columns="columns1" :data="data1"></Table> -->
      <table>
          <tr>
              <th colspan="2">
                子组件数据
              </th>
          </tr>
          <tr>
              <td>my name</td>
              <td>{{ myName }}</td>
          </tr>
          <tr>
              <td>my age</td>
              <td>{{ myAge }}</td>
          </tr>
      </table>
  </template>

  <script>
      // 组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用props把数据传给子组件
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'matrix',
          age: 23
        },
        components: {
          'my-component': {
            template: '#myComponent',
            props: ['myName','myAge']
          }
        }
      })
  </script>
</body>
</html>

运行示例

All text

prop的绑定类型

单向绑定

既然父组件将数据传递给了子组件，那么如果子组件修改了数据，对父组件是否会有所影响呢？
我们将子组件模板和页面HTML稍作更改

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>component props</title>
    <link rel="shortcut icon" href="../src/assets/logo.png" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        font-size: 16px;
        font-family: '微软雅黑';
    }
    #app {
        margin: 100px auto;
        max-width: 480px;
    }
    table, td, th {
        border-collapse: collapse;
        border-spacing: 0;
    }
    td, th {
        border: 1px solid #bcbcbc;
        padding: 10px 35px;
    }
    th {
      background: #42b983;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
    }
    </style>
</head>
<body>
  <div id="app">
      <table>
          <tr>
              <th colspan="3">父组件数据</td>
          </tr>
          <tr>
              <td>name</td>
              <td>{{ name }}</td>
              <td><input type="text" v-model="name" /></td>
          </tr>
          <tr>
              <td>age</td>
              <td>{{ age }}</td>
              <td><input type="text" v-model="age" /></td>
          </tr>
      </table>

      <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
  </div>

  <template id="myComponent">
      <table>
          <tr>
              <th colspan="3">子组件数据</td>
          </tr>
          <tr>
              <td>my name</td>
              <td>{{ myName }}</td>
              <td><input type="text" v-model="myName" /></td>
          </tr>
          <tr>
              <td>my age</td>
              <td>{{ myAge }}</td>
              <td><input type="text" v-model="myAge" /></td>
          </tr>
      </table>
  </template>

  <script>
    // 组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用props把数据传给子组件
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'matrix',
        age: 23
      },
      components: {
        'my-component': {
          template: '#myComponent',
          props: ['myName','myAge']
        }
      }
    })
  </script>
</body>
</html>
props默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

双向绑定

可以使用.sync显式地指定双向绑定，这使得子组件的数据修改会回传给父组件
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

单次绑定

可以使用.once显式地指定单次绑定，单次绑定在建立之后不会同步之后的变化，这意味着即使父组件修改了数据，也不会传导给子组件
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
MatrixSparse
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
11-19
一、is的使用 参考Vue 2.0教程，有讲到 is 的使用： 解析 DOM 模板时的注意事项 有些 HTML 元素，诸如 、、 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 、 和 ，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如： 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的
vue 动态组件【详解】component :is
热门推荐
朝阳39的博客
12-31 3万+
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为： <component :is="componentTag"></component> data() { return { componentTag: '', } }, componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。 完整范例代码 <template>
Vue Styled Components：Vue.js 的样式组件库
最新发布
gitblog_00048的博客
03-26 533
Vue Styled Components：Vue.js 的样式组件库 项目地址:https://gitcode.com/styled-components/vue-styled-components 在前端开发中，styled-components 已经成为一个受欢迎的CSS-in-JS解决方案，它允许开发者直接在JavaScript组件内部编写样式。而Vue Styled Components...
Vue中component标签的了解
Amy_ly的博客
07-26 4389
</div>data() {return {// show 表示要展示的组件的名字show: 'A'},A,B
vue - component 和is使用
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-06 829
is: 指定这个组件显示什么 使用场景：页面的一部分动态切换，例如登录时的手机号注册/短信验证 1、创建两个组件/components/DuanXin.vue 、/components/Register.vue 1、引入组件，点击不同的按钮，切换不同的组件，通过is指定显示哪一个组件 <template> <div> <div> <button @click="tabname = 'DuanX...
Vue动态组件 component :is的使用
couch potato的博客
10-12 1468
Vue动态组件 component :is的使用。
vue-component-creator-plugin:通过自动创建的 vue 组件和 vuex 模块简化您的前端开发
05-31
vue-component-creator 一个头脑风暴插件，用于创建带有 Sass 文件的单个文件 vue.js 组件并完成 vuex 模块。 这个插件做了几件事情，以简化您的开发经验。 安装 在插件设置中搜索Vue Component Creator 。 或者从...
vue-component-ts:最佳实践
03-30
Vue-Class-Componet-T Vue最佳实践Vue SPA（单页应用）最佳实践开箱git clone https://github.com/Fea-Sin/vue-component-ts.gitcd vue-component-tsnpm installnpm run devvue技术栈详解Vue-Property-Decoratorvue...
vue-component-devtool:Vue 组件开发模板
05-14
vue-component-devtool通过 初始化；采用 来加载文档。基于 webpack 的 Vue 组件开发工具。可以编写例子，文档。usegit clone https://github.com/mengdu/vue-component-devtool my-component安装依赖yarn# ornpm ...
vue-component-inspector:这是仅适用于Vue 2.0的vue开发工具
03-20
Vue组件检查器Vue-Component-Inspector是一种Vue 2.0开发调试工具，它本身也是一个Vue组件。特点：易安装，兼容性强。基于开发。安装方法（Vue CLI） $ npm install vue-component-inspector -S ####在main.js中写入...
vue-component-compiler：将单个文件Vue组件编译为CommonJS模块
02-20
@ vue / component-compiler 用于编译Vue单个文件组件的高级实用程序 该软件包包含高级实用程序，如果您正在为将Vue单个文件组件编译为JavaScript的捆绑器或模块系统编写插件/转换，则可以使用这些实用程序。 在...
VUE-组件（component）
damadashen的博客
05-20 8014
VUE组件介绍
Vue中的component标签的用法
conquer_galaxy的博客
04-08 2591
Vue中的component标签的用法
Vue内置组件的component标签
lwc_1234的博客
01-17 1万+
记录vue内置组件的component标签的使用
Vue 动态显示组件 component :is
qq_42704540的博客
05-16 9825
最终实现结果，如下图： 点击不同的组件名称，界面显示相应的组件。 实现过程 1、导入所需的组件 1、点击左侧按钮时，将对应组件的名字保存进数组中 <ul class="components-list"> // 点击时，将对应组件名保存进数组 <li @click="dragStart('oneDiv')" data-name="oneDiv"> <span>组件1</span
Vue动态组件Component的:is命名规则以及简单实现
wm9028的专栏
06-22 2200
# Vue动态组件Component的:is命名规则以及简单实现 * 当组件使用**短横线分隔命名** （kebab-case） 定义一个组件为**my-component-name**时，你在引用这个自定义元素时也必须使用 kebab-case，则必须使用**my-component-name**引用组件。vue3 不能使用短横线 * 当组件使用 **帕斯卡命名法**（PascalCase）组件命名MyComponentName，**my-component-name** 、**myComponen
注解之@Configuration、@Bean、@Component
m0_61682705的博客
11-26 560
首先：我们先简单描述一下这三个的作用@Component注解表明一个类会作为组件类，并告知Spring要为这个类创建bean。@Bean注解告诉Spring这个方法将会返回一个对象，这个对象要注册为Spring应用上下文中的bean。通常方法体中包含了最终产生bean实例的逻辑。用于显式声明单个bean，而不是让Spring像上面那样自动执行它。它将bean的声明与类定义分离，并允许您精确地创建和配置bean。另外@Bean注解的方法返回值是对象，可以在方法中为对象设置属性。
vue组件component的注册与使用
游小北的博客
08-01 3932
vue组件的概念、使用方法和注意事项（附代码、图片解析）
一文搞懂组件 Vue component (上篇)
welcome
12-26 1620
前言   vue作为前端目前三大主流框架之一，在前端中也是占有重要的地位。特别是在国内，现在想要找一份前端的工作，那么学会vue，将你的不二之选。   vue目前为什么这么重要呢？因为vue的作者是中国人。那当然不是啦~ 最最最最重要的原因是它有很多优点： 双向数据绑定 组件化 单页面应用用户体验好 简单易学 ……   好了，现在知到vue.js的优点就是简单易学，那接下来我们就一起来学习学习它的组件化开发 --> component 什么是组件   我们来看看官网的介绍，他说是可复用的 Vue
vue-flatpickr-component
07-16
vue-flatpickr-component 是一个基于 Vue.js 框架的日期选择器组件。它基于 Flatpickr 库开发，提供了丰富的日期选择功能，并可以灵活地集成到 Vue.js 项目中。 vue-flatpickr-component 具有以下特点和优势： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值