Vue全掌握——组件化

最新推荐文章于 2024-08-15 20:12:45 发布

C-A-L-D

最新推荐文章于 2024-08-15 20:12:45 发布

阅读量172

点赞数

分类专栏： web前端-框架

本文链接：https://blog.csdn.net/qq_42952262/article/details/106737614

版权

web前端-框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件化的前置知识：es6模块化
组件化能够解决代码臃肿、不易协作、难以复用的问题
组件化可以将一个页面的区域功能细分，每个区域作为一个组件，每个组件包括：

功能（JS代码）
内容（模板代码）
样式（CSS代码）——>需要vue-cli构建工具支撑

先看Demo

demo目录结构：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件化demo</title>
    <script src="./src/main.js" type="module"></script>
</head>
<body>
<div id="box">

</div>
</body>
</html>

main.js

import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js"
import App from "./App.js"

new Vue({
    components: {
        App,
    },
    render(h) {
        return h(App);
    },
}).$mount('#box');

App.js（根组件-使用其他的组件）

import UserInfo from './components/UserInfo.js'

let template = `
<div id="box">
<UserInfo v-for="item in AllUserInfo" :name="item.name" :age="item.age" />
</div>
`

export default {
    data() {
        return {
        	//给UserInfo用户信息组件传数据
            AllUserInfo: [
                {name: '张三', age: 16},
                {name: '李四', age: 17},
                {name: '王五', age: 18}
            ]
        }
    },
    components: {
        UserInfo,
    },
    template
}

UserInfo.js（用户信息组件）

let template = `
<div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
</div>
`;

export default {
	//props属性设置组件需要接收的参数属性，值不能被修改
    props: ["name", "age"],
    template
}

在这里插入图片描述

注意：

若使用原生 ES Modules来构建工程，注意导入vue.esm.browser.js
其他Vue插件都会报类似错误：
The requested module 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js' does not provide an export named 'default'
正确导入Vue文件模块：
import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js"

组件化

组件封装

Vue组件化配置对象和Vue实例有以下差异：

无el
data是一个函数，返回值作为数据
没有el，组件模板必须定义在template中

使用组件

全局注册组件：
全局注册一个组件，整个应用都可以使用该组件。（很少用）
在这里插入图片描述

Vue.component('user-info', UserInfo);

局部注册组件：
局部注册一个组件，只能在该实例局部应用
在这里插入图片描述

new Vue({
    data: {
        message: 'hello Vue!'
    },
    template,
    //局部组件
    components: {
        UserInfo,
    }
}).$mount('#box');

使用组件（直接当一个单标签或双标签使用！）

let template = `
<div id="box">
<UserInfo />
</div>
`

组件树

在这里插入图片描述

向组件传递数据

注意：在组件中，属性是只读的，绝不可以更改，这叫做单向数据流（只有上级才能取到下级组件的属性）

注意：

组件接收外部数据，需要props属性定义需要接收的参数属性
比如上面的UserInfo组件的name，age需要从组件外部获取参数值，就要使用props属性
props属性和data属性区别：
props属性定义的属性值不可修改，data属性值可以修改