-组件基础-局部组件 // 局部组件的简写

-组件基础-局部组件


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app1"><!-- 只能在 app1 的模板中使用 local-component 组件 --><local-component></local-component></div><div id="app2"><!-- 不能在 app2 的模板中使用 local-component 组件，否则会报错 --><!-- <local-component></local-component> --></div><script src="./vue.js"></script><script>// 1. 使用 Vue.extend() 创建组件的构造函数const LocalComponent = Vue.extend({data: function () {return {message: '局部组件的数据'}},template: '<div><h2>{{message}}</h2></div>'});const app1 = new Vue({el: '#app1',data: {mesage: 'app1根组件的数据'},// 2. 将 LocalComponent 注册成根组件 app1 的子组件components: {'local-component': LocalComponent}});const app2 = new Vue({el: '#app2',data: {mesage: 'app2根组件的数据'}});</script>
</body></html>

局部组件的简写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app1"><!-- 只能在 app1 的模板中使用 local-component 组件 --><local-component></local-component></div><script src="./vue.js"></script><script>// 未简写之前：// const LocalComponent = Vue.extend({//     data: function () {//         return {//             message: '局部组件的数据'//         }//     },//     template: '<div><h2>{{message}}</h2></div>'// });// const app1 = new Vue({//     el: '#app1',//     data: {//         mesage: 'app1根组件的数据'//     },//     components: {//         'local-component': LocalComponent//     }// });// 简写方式一：// const app1 = new Vue({//     el: '#app1',//     data: {//         mesage: 'app1根组件的数据'//     },//     components: {//         'local-component': Vue.extend({//             data: function () {//                 return {//                     message: '局部组件的数据'//                 }//             },//             template: '<div><h2>{{message}}</h2></div>'//         })//     }// });// 简写方式二：const app1 = new Vue({el: '#app1',data: {mesage: 'app1根组件的数据'},components: {'local-component': {data: function () {return {message: '局部组件的数据'}},template: '<div><h2>{{message}}</h2></div>'}}});</script>
</body></html>

-组件基础-局部组件 // 局部组件的简写相关推荐

【Vue】9 - 组件（全局、局部）、通信（props、$meit、$refs）、插槽slot、component、$nextTick等
文章目录 1. 组件命名 2 . 全局组件 3. 局部组件 4. 嵌套组件 5.发布订阅 6. 组件间通信父传子(属性传递) 子传父(触发事件传递:传子的数据,触发父的方法) 案例:模态框 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
mini-vue之组件的实现和渲染流程以及局部和全局组件建立的联系
实现组件 vue的diff算法 Vue中,一般一个项目只有一个根组件,也就是 new Vue产生的app. 但是一个页面不可能只由一个组件构成,很明显我们需要实现自定义组件. vue中提供了两种自定义 ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
组件基础-全局组件//全局组件的简写
组件基础-全局组件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
Vue3中如何进行页面局部刷新，组件刷新
前言今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态但是数据已经传送给后端,后端也完成了响应的处理这个时候我想到了局部刷新,我想vue3是vue ...
react基础入门，类组件和函数组件，state，props，refs
React入门目录 React入门 React入门 Vue跟React的异同点相同点不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

-组件基础-局部组件 // 局部组件的简写

-组件基础-局部组件

局部组件的简写

-组件基础-局部组件 // 局部组件的简写相关推荐

最新文章

热门文章