组件

最新推荐文章于 2024-05-02 18:12:22 发布

噢，我明白了

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.5k

点赞数 3

分类专栏： vue基础组件嵌套文章标签： javascript vue 组件化 js

本文链接：https://blog.csdn.net/qq_38980678/article/details/114411026

版权

组件嵌套同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue基础

3 篇文章 0 订阅

订阅专栏

一.组件的概念

1.组件
组件，是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。
使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。

2.vue中的组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
在这里插入图片描述

组件化开发，类似于模板化开发，但是并不等同于模板化开发

 	组件化开发，包括页面，样式，行为（业务逻辑）

 	 模块化开发，只包括行为（业务逻辑）

vue中的组件分为全局注册组件和局部注册组件
```
 组件是特殊的实例 
```

 组件选项和实例选项基本保持一致

```
 组件没有el选项，有template选项
```
template可以是一段html代码，也可以直接指向页面模板，类似于el选项
组件的data选项必须是一个函数，返回一个对象
组件渲染时，数据会有作用域，如果自身没有定义，则不会渲染(数据也可以由上级传递 - 组件之间的传值)

二、全局注册组件
使用vue提供的template标签，创建模板，然后再注册到组件
1.定义全局组件
2.注册全局组件
3.使用全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 3. 使用全局组件 -->
      <my-com></my-com>
    </div>
	</body>
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 1. 定义组件视图模板-->
  <template id="temp1">
    <div>
      这是全局组件 - {{name}}
      <button @click="fn">按钮</button>
    </div>
  </template>
  
  <script type="text/javascript">
    // 2. 注册全局组件
    Vue.component("my-com",{
      template:"#temp1",
      data(){
        return {
          name:"张三"
        }
      },
      methods:{
        fn(){
          console.log(this.name)
        }
      }
    })
    
     
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue global component"
      }
    })
    
    
  </script>
</html>

三、局部注册组件

vue实例内部选项

定义组件视图模板
定义局部组件对象
注册局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 4. 使用局部组件 -->
      <say-hello></say-hello>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 1. 定义组件视图模板-->
  <template id="temp1">
    <div>
      这是局部组件 - {{name}}
      <button @click="fn">按钮</button>
    </div>
  </template>
  
  <script type="text/javascript">
    
    // 2. 定义局部组件对象
    var temp1 = {
      template:"#temp1",
      data(){
        return {
          name:"李四"
        }
      },
      methods:{
        fn(){
          console.log(this.name)
        }
      }
    }
      
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue global component"
      },
      components:{
        // 3.注册局部组件
        sayHello:temp1
      }
    }) 
  </script>
</html>

注意： 谁注册谁使用

四、组件之间的关系

1. 父子组件
组件的嵌套
1.创建父组件模板
2.创建子组件模板
3.定义子组件（在script）里面
4.定义父组件（在script）里面
5.注册局部组件(父组件)，谁注册谁使用！（在new Vue实例里面）
6.注册局部组件(子组件)，谁注册谁使用！（在需要使用子组件的父组件里）
7.使用父组件（在body的vue容器里）
8.使用子组件（在需要使用子组件的父组件的模板里）
使用组件时都是以名字命名的标签形式

 <my-com></my-com>
<child-com></child-com>

例子：

<body>
    <div id="app">
        {{msg}}
        <!-- 7.使用父组件 -->
        <my-com></my-com>
    </div>
</body>
<script src="libs/vue.js"></script>
<!-- 1.创建父组件模板 -->
<template id="temp">
    <div>
        <h1>{{msg}}</h1>
        <!-- 8.使用子组件 -->
        <child-com></child-com>
    </div>
</template>
<!-- 2.创建子组件模板 -->
<template id="child">
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
    // 3.定义子组件
    const child = {
        template: "#child",
        data() {
            return {
                msg: "hello child-temp"
            }
        }
    }
    // 4.定义父组件
    const com = {
        template: "#temp",
        data() {
            return {
                msg: "helle temp 3"
            }
        },
        components: {
            // 6.注册局部组件(子组件)，谁注册谁使用！
            "child-com": child
        }
    }

    const vm = new Vue({
        el: "#app",
        data: {
            msg: "hello vue"
        },
        components: {
            // 5.注册局部组件(父组件)，谁注册谁使用！
            "my-com": com,
        }
    })
</script>

其中父子组件之间的传值是非常重要的知识部分
父子组件如何传值将在下一篇中详细讲解

噢，我明白了

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
组件

一.组件的概念1.组件组件，是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。2.vue中的组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：组件化开发，类似于模板化开发，但是并不等同于模
复制链接

扫一扫