Vue的单文件组件和非单文件组件

单文件组件：一个文件中只包含一个组件，后缀为.vue（常用）

<template><!-- html部分 --><div><p class="title">{{name}}</p></div>
</template>
<script>// js部分export default {data() {return {title: '这是标题'}}}
</script>
<style>/*css部分*/.title {font-size: 24px;color: orange;}
</style>

非单文件组件：一个文件中包含有多个组件，后缀为.html

在非单文件组件中“定义、注册、使用”组件
【下例中将header-com注册为局部组件、footer-com注册为全局组件】

<div id="root"><!-- 使用局部组件 --><header-com></header-com><!-- 使用全局组件 --><footer-com></footer-com>
</div>

// 定义组件
const header = Vue.extend({template: `<div id="header-container">{{title}}</div>`,data() {return {title: '这是标题'}}
});
// 定义组件
const footer = Vue.extend({template: `<div id="footer-container">{{title}}</div>`,data() {return {title: '这是底部'}}
});
// 注册全局组件
Vue.component('footer-com', footer);
new Vue({el: '#root',// 注册局部组件components: {'header-com': header}
});

注意事项
① 组件中不能添加el配置项，只需在根vm中配置，因为所有的组件最终都被一个vm管理（vue只有一个老大）
② 组件中使用name配置项修改组件在开发者工具中展示的名字
③ 组件实际是一个VueComponent构造函数，在每次使用组件的时候都会实例化一个组件对象。
④ 重要的内置关系：VueComponent.prototype.proto === Vue.prototype，目的是让组件能访问到根vm上的属性和方法。

Vue的单文件组件和非单文件组件相关推荐

vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
无论是什么层级的组件之间互相调用,掌握好ref后都是万变不离其宗.来练练手吧 1.父子传: 父组件: <template><div><Button @click=&quo ...
Vue - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于 Vue.js / Nuxt.js 的表情图片满意度评价功能(评分组件), ...
Vue_(组件通讯)非父子关系组件通信
Vue单项数据流传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
微信小程序 - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于微信小程序的表情图片满意度评价功能(评分组件),高效无 BUG 没有任何插 ...
Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
非单文件组件和单文件组件区别
这里写自定义目录标题非单文件组件和单文件组件区别非单文件组件和单文件组件区别在学vue组件时有这么两个概念:非单文件组件和单文件组件. 现在来总结一下这两种组件区别: 非单文件组件: 一个文件里 ...
React学习：双向数据绑定、约束性和非约束性组件-学习笔记
文章目录 React学习:双向数据绑定.约束性和非约束性组件-学习笔记表单约束性和非约束性组件(受限/非受限) 双向数据绑定小例子 React学习:双向数据绑定.约束性和非约束性组件-学习笔记表 ...
linux移动文件 rf参数_linux下文件的复制、移动与删除命令为：cp，mv，rm
查看centOS 版本 cat /etc/redhat-release 1,复制粘贴文件 cp [选项] 源文件或目录目标文件或目录 2,剪切粘贴文件 mv [选项] 源文件或目录 ...
用python写一个文件管理程序下载_Python管理文件神器 os.walk
原标题:Python管理文件神器 os.walk 来自:CSDN,作者:诡途 [导语]:有没有想过用python写一个文件管理程序?听起来似乎没思路?其实是可以的,因为Python已经为你准备好了神器 ...

Vue的单文件组件和非单文件组件

Vue的单文件组件和非单文件组件相关推荐

最新文章

热门文章