Vue进阶 - Vue组件

吾昂王sun

已于 2022-07-04 16:45:58 修改

阅读量476

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2021-12-21 09:56:12 首次发布

本文链接：https://blog.csdn.net/qq_39264561/article/details/122055628

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

使用步骤

定义组件（创建组件）
注册组件
使用组件（写组件标签）

非单文件组件

定义组件

使用Vue.extend(options)创建，其中options和new Vue(options) 时传入的那个options几乎一样，但也有点区别

区别如下：

el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数，避免组件被复用时，数据存在引用关系
备注：使用 template 可以配置组件结构。

// 创建组件
const schoolConstructor = Vue.extend({
  //  el: '#root',    组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个服务器
  template: `
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
    `,
  data() {
    return {
      name: "清华大学",
      address: "北京",
    };
  },
});

注册组件

局部注册

new Vue的时候传入components选项

new Vue({
  el: "#root",
  data: {},
  // 组件注册
  components: {
    school: school,
  },
});

全局注册

Vue.component('组件名',组件)

Vue.component('BaseComponentA',BaseComponentA); //第一个参数:组件名称,第二个参数:要注册的组件

使用组件

<div id="root">
  <school></school>
</div>

注意点

关于组件名
- 一个单词组成
  - 第一种写法（首字母小写）：school
  - 第二种写法（首字母大写）：School
- 多个单词组成
  - 第一种写法（kebab-case命名）：my-school
  - 第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
- 备注：
  - 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
  - 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签
- 第一种写法：<school></school>
- 第二种写法：<school/>
- 备注：不使用脚手架时，<school/>会导致后续组件不能渲染
一个简写方式
- const school = Vue.extend(options)可简写为：const school = options

VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写<school/>或<school></school>我们只需要写，Vue解析时会帮我们创建school组件的实例对象；即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
关于this指向：
- 组件配置中：
  - data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
- new Vue(options)配置中：
  - data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）；Vue的实例对象，以后简称vm

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
				<div>
					<h2>名称：{{name}}</h2>	
					<h2>地址：{{address}}</h2>	
					<button @click="showName">点我提示姓名</button>
				</div>
			`,
        data() {
            return {
                name: '半夏天南星',
                address: '杭州'
            }
        },
        methods: {
            showName() {
                console.log('showName', this)
            }
        },
    })

    const test = Vue.extend({
        template: `<span>半夏天南星</span>`
    })

    //定义hello组件
    const hello = Vue.extend({
        template: `
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
        data() {
            return {
                msg: '你好啊！'
            }
        },
        components: { test }
    })

    //创建vm
    const vm = new Vue({
        el: '#root',
        components: { school, hello }
    })
</script>

</html>

单文件组件

代码示例：

:⚠️以下示例代码，暂时无法运行，因为需要在vue脚手架下才能解析，此处只是展示单文件组件的写法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
</head>
<body>
    <div id="root"></div>
</body>

<script src="../js/vue.min.js"></script>
<script src="./main.js"></script>
</html>

main.js

import App from './App.vue'

new Vue({
    el: '#root',
    // render: (h) => h(App),
    template: `<App></App>`,
    components: {
        App
    }
});

App.vue

<template>
  <div>
      <School></School>
      <Student></Student>
  </div>
</template>

<script>
import School from "./School.vue";
import Student from "./Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
};
</script>

<style lang="scss" scoped>
</style>

School.vue

<template>
  <div class="school">
    <h2>名称：{{ name }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="showName">点我提示姓名</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "半夏天南星",
      address: "杭州",
    };
  },
  methods: {
    showName() {
      console.log("showName", this);
    },
  },
};
</script>

<style lang="" scoped>
.school {
  background: orange;
}
</style>

Student.vue

<template>
  <div class="school">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "半夏天南星",
      age: 18,
    };
  },
};
</script>

吾昂王sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶 - Vue组件

使用步骤定义组件（创建组件）注册组件使用组件（写组件标签）非单文件组件定义组件使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别区别如下：el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器data必须写成函数，避免组件被复用时，数据存在引用关系备注：使用 template 可以配置组件结构。// 创建组件const schoolConstruct
复制链接

扫一扫