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

我们是不是经常听到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></div>`,data() {return {message: 'hello world'}},methods: {alertProcess: function (event) {alert('我是自定义全局组件呀')}}})new Vue({el: '#app',data() {return {}}})</script>
</body>

运行效果的

PS：需要注意的一个小细节

1.Vue.component('my-button', {...}) 组件名可以定义为my-button 和myButton 在div中是用<my-button>，定义成mybutton在div中引用报错，这个是遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的HTML 元素相冲突。

2.每个<my-button>都是独立的互不影响，相当于每次使用<my-button>都会在内存中开辟一个新的地址指向

2.局部注册组件

<body><div id="app"><my-button></my-button><my-button></my-button><my-plabel></my-plabel></div><script src="node_modules/vue/dist/vue.js"></script><script>Vue.component('my-button', {template: `<div><button @click="alertProcess()">自定义按钮</button> <p>{{ message }}</p></div>`,data() {return {message: 'hello world'}},methods: {alertProcess: function (event) {alert('我是自定义全局组件呀')}}})new Vue({el: '#app',data() {return {}},components: {'myPlabel': {template: '<p>局部组件 我的P标签</p>'}}})</script>
</body>

运行效果的

VUE 自定义组件定义和基本使用相关推荐

vue自定义组件及定义插槽
vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...
vue 自定义组件创建及其使用
vue 自定义组件创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...
Vue自定义组件与Vue组件组件传值
一.Vue自定义组件组件是可复用的 Vue 实例,且带有一个名字.组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对 ...
如何运用Vue自定义组件以及组件的传值
Vue自定义组件引入组件首先在项目内的components新建.vue文件. 创建完成之后搭建完整的框架.其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets ...
Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...

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

一、初始化项目

二、组件注册

VUE 自定义组件定义和基本使用相关推荐

最新文章

热门文章