VUE 自定义组件定义和基本使用

最新推荐文章于 2024-10-06 22:31:10 发布

codesWang

最新推荐文章于 2024-10-06 22:31:10 发布

阅读量1.5k

点赞数

分类专栏： VUE学习文章标签： vue

本文链接：https://blog.csdn.net/qazzwx/article/details/106068864

版权

本文介绍了如何在Vue中进行组件化开发，包括初始化项目和组件注册。首先，通过创建文件夹和设置环境来初始化Vue项目，接着详细阐述了全局和局部注册组件的方法。在全局注册组件时，注意组件名应遵循W3C规范，确保不与HTML元素冲突。而每个全局组件实例都是独立的。此外，还提到了局部注册组件的运行效果。

摘要由CSDN通过智能技术生成

我们是不是经常听到Vue组件化开发，今天让我们来看看怎么组件定义的方式和基本使用吧

一、初始化项目

1.创建文件夹，初始化环境自动生成package.json 文件

npm init -y

2.导入VUE依赖

npm i vue

如下图就引入成功啦

二、组件注册

1.全局注册组件

<body>
    <div id="app">
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
         Vue.component('my-button', {
            template: `<div>
                <button @click="alertProcess()">自定义按钮</button> 
                <p>{
  { message }}</p>