vue 组件 - 非单文件组件

一、定义组件

const school = Vue.extend({name: 'xuexiao', // ----------------------------> 指定组件在开发者工具中显示的名字template: ` // ----------------------------> 模板<div>... 此处是结构</div>`,data() { // ----------------------------> 模板数据return {msg: '此处是数据'}}
})// Vue.extend 的简写方式
const school = {....}

二、注册组件

// 全局注册
Vue.component('变量名', 组件名);
// 局部注册
new Vue({el: '#root',components: { // ----------------------------> 注册多个组件组件名,组件名,组件名}
})

三、使用组件

<div id="root"><组件名></组件名><组件名/> <!-- 后续组件不能渲染 -><my-name/></div>

四、组件嵌套

// 1. 把子组件写在父组件之前
// 2. 父组件内注册组件
const 父组件 = {components: {// 子组件名称}
}
// 3. 父组件模板内使用子组件
template: `<div><student/></div>
`,

五、对组件的理解

组件本身是 Vue.extend 生成的 VueComponent 构造函数
每次调用 Vue.extend，返回的都是一个全新的 VueComponent 实例对象
每个 VueComponent 都被 vm 管理着
VueComponent.prototype.__proto__ === Vue.prototype // true
让 VueComponent 可以访问到 Vue.prototype 上的属性、方法，如果没有上面这一句，VueComponent 要么就自己管自己，要么就从 Object.prototype 上找东西
关于 this 指向
(1) new Vue(option) 里面的 data、computed、methods、watch 他们的 this 都是 vm
(2) 组件中的 this 是 VueComponent 实例对象

vue 组件 - 非单文件组件相关推荐

Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
Vue自定义组件——非单文件组件
使用 component 或 components <div id="root"><h1>{{msg}}</h1><school>& ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...
Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><div><p class="tit ...
非单文件组件和单文件组件区别
这里写自定义目录标题非单文件组件和单文件组件区别非单文件组件和单文件组件区别在学vue组件时有这么两个概念:非单文件组件和单文件组件. 现在来总结一下这两种组件区别: 非单文件组件: 一个文件里 ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
Vue系列之单文件组件
文章目录前言一.什么是单文件组件? 二.单文件组件的结构三.如何引入并使用单文件组件 1. B组件中需导出(export) 2. A组件中需导入并局部注册B(import) 前言 Vue应用的一 ...
render注册一个链接组件_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...

vue 组件 - 非单文件组件

vue 组件 - 非单文件组件相关推荐

最新文章

热门文章