2-Vue组件开发

2025年03月03日 9.2k 字大概 57 分钟

Tips

下载插件 vetur

通过 default.vue 生成项目结构

简介

组件的作用

为了降低代码(模板)复杂度及复用性, 引入了组件

一个组件就是页面中的一个区域
组件可以互相嵌套

组件的组成

功能 (Js代码)
内容 (模板代码)
样式 (CSS代码)

组件开发

创建组件

组件是根据配置对象创建的, 所以开发组件只需要写一个配置对象, 类似 vue 配置对象, 但是略有区别

无 el

data 是一个函数, 返回一个对象

var mybutton ={ 
	data(){
        return {
        	count: 0,
        };
    },
};

complate 也可以不配置模板, 而是配置 render 生成虚拟 DOM 树, 但麻烦

var mybutton ={ 
	data(){
        return {
        	count: 0,
        };
    },
    template: `<button @click="count++">当前点击了{{count}}次</button>`
};

注册组件

组件间的嵌套关系取决于组件的注册方式. 组件注册分为 全局注册 和 局部注册 两种方式

全局注册

1 2	`// 全局注册了一个组件 Vue.compent("mybutton", mybutton) // 参数分别为: 组件名, 组件配置对象`

使用组件 (创建虚拟节点)

1
2
3

template: `<div>
    <mybutton/>
</div>`

效果如下:

复用

<div id="app">
    <mybutton/>
</div>
<script src="./vue.js"></script>
<script>
    var mybutton = {
        data() {
            return {
                count: 0,
            };
        },
        template: `<button @click="count++">当前点击了{{count}}次</button>`
    };
    Vue.component("Mybutton", mybutton)
    var vm = new Vue({
        template: `<div>
            <Mybutton />
            <Mybutton />
            <Mybutton />
            <Mybutton />
            <Mybutton />
        </div>`,
    })
    vm.$mount("#app");
</script>

效果如下:

数据不会互相影响

这得益于 data 使用函数形式定义

若使用同一个对象

<div id="app">
    <mybutton/>
</div>
<script src="./vue.js"></script>
<script>
    var obj = {
        count: 0
    }
    var mybutton = {
        data() {
            return obj;
        },
        template: `<button @click="count++">当前点击了{{count}}次</button>`
    };
    Vue.component("Mybutton", mybutton)
    var vm = new Vue({
        template: `<div>
        <Mybutton />
        <Mybutton />
        <Mybutton />
        <Mybutton />
        <Mybutton />
    </div>`,
    })
    vm.$mount("#app");
</script>

组件间数据则无法相互独立

效果如下:

局部注册

当使用构建工具或打包工具时, 可能影响打包结果, 使得结果变大, 这时就可以使用局部注册

在配置 vue 实例时添加配置对象

var vm = new Vue({
    components: {
        Mybutton: mybutton// 局部注册组件
    }
})

使用效果除作用域完全一致, 这里不再演示

也可更改组件配置对象名称与组件名一致, 使用速写属性

var Mybutton = {
    data() {
        return {
            count: 0,
        };
    },
    template: `<button @click="count++">当前点击了{{count}}次</button>`
};
var vm = new Vue({
    components:{
        Mybutton,
	},
    template: `<div>
    <Mybutton />
    <Mybutton />
    <Mybutton />
    <Mybutton />
    <Mybutton />
    </div>`,
})
vm.$mount("#app");

使用组件

在模板中使用组件
把组件名当作 HTML 元素名使用即可
注意:
1. 组件必须有结束
  - 组件可以自结束, 也可以用结束标记结束, 但必须有结束
2. 组件的命名
  - 短横线命名法 (kebab-case)
    my-button
  - 大驼峰命名法 (PascalCase)
    MyButton
    大驼峰命名法较为灵活, 使用大驼峰命名法的组件也支持使用短横线命名法调用, 如:
    - 命名: MyButton: Mybutton
    - 在模板中使用: <MyButton /> 或 <my-button /> 均可

向组件传递数据

以 Title 组件为例

var Title = {
  	template: `<h1>一级标题</h1>`,
};
var vm = new Vue({
    components: {
        Title,
    },
    template: `<Title />`,
});
vm.$mount("#app");

提高组件的泛用性, 显示不同的标题.

不能使用 data : data 只能由组件自身控制, 不能由外界控制

属性传递 props(property)

声明组件属性:

var Title = {
    props: ["title"],
    template: `<h1>{{title}}</h1>`,
};

传递组件属性

var vm = new Vue({
    components: {
        Title,
    },
    template: `<div>
        <Title title="标题1"/>
        <Title title="标题2"/>
        <Title title="标题3"/>
    </div>`,
});
vm.$mount("#app");

注意:

在组件中, 属性是只读的, 不能更改
这叫做 单向数据流

工程结构

只是习惯, 并非必须

src

vue.browser.js
vue代码

App.js
vue的根组件

// vue的根组件
const template = `
<h1>App组件</h1>
`;
export default {
    template
}

main.js
入口模块文件, 作为 ES6 模块

// 入口模块文件
// 创建Vue实例
import Vue from "./vue.browser.js // 得到vue构造函数 区别: 不会污染全局变量
import App from "./App.js";

new Vue({
    render: (h) => h(App),
}).$mount("#app")

或者使用配置对象:

// 入口模块文件
// 创建Vue实例
import Vue from "./vue.browser.js // 得到vue构造函数 区别: 不会污染全局变量
import App from "./App.js";

new Vue({
    components: {
        App
    },
    template: `<App />`,
}).$mount("#app")

components
- 组件

index.html

1 2	`<div id="app"></div> <script src="./src/main.js"></script>`