Vue自定义组件——非单文件组件

使用 component 或 components

<div id="root"><h1>{{msg}}</h1><school></school><hr /><student></student><hello></hello>
</div>
<hr />
<div id="root2"><hello></hello>
</div>

Vue.config.productionTip = false
// 1、创建school组件
const school = Vue.extend({// el: '#root',name: 'at',  //开发者工具中显示的标签名template: `<div><h2>学校名称：{{schoolName}}</h2>    <h2>学校地址：{{address}}</h2></div>`,data(){return {schoolName: 'XXX大学',address: 'XXX市',}}
})
// 1、创建student组件    简写
const student = {template: `<div><h2>学生名称：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName: '张三',age: '18',}}
}
// 1、创建hello组件
const hello = Vue.extend({template:    `<div><button @click="btn">点击</button></div>`,data(){return {str: 'hello word'}},methods: {btn(){alert(this.str)}}
})
// 2、全局注册组件
Vue.component('hello',hello)new Vue({el: '#root',data: {msg: '你好啊'},components: { //注册组件 局部注册school: school,student: student}
})
new Vue({el: '#root2'
})

组件嵌套在自定义组件的components 中配置其他组件

<div id="root"><school></school><hr />
</div>

Vue.config.productionTip = false
// 1、创建student组件
const student = {template: `<div><h2>学生名称：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName: '张三',age: '18',}}
}
// 1、创建school组件
const school = Vue.extend({// el: '#root',template: `<div><h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2><student></student></div>`,data(){return {schoolName: 'XXX大学',address: 'XXX市',}},components: {student: student}
})new Vue({el: '#root',components: {  //注册组件 局部注册school: school,}
})

vue实例（vm）或组件实例中的$children数组就是其所包含的组件或子组件

Vue自定义组件——非单文件组件相关推荐

vue 组件 - 非单文件组件
一.定义组件 const school = Vue.extend({name: 'xuexiao', // ----------------------------> 指定组件在开发者工具中显示 ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...
Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><div><p class="tit ...
vue开发规范（单文件组件）
这里主要分为Vue风格指南和customer自定义风格,后续应该会继续更新. vue风格指南优先级A(必要的) 组件名为多个单词 export default {name: 'vue-calenda ...
非单文件组件和单文件组件区别
这里写自定义目录标题非单文件组件和单文件组件区别非单文件组件和单文件组件区别在学vue组件时有这么两个概念:非单文件组件和单文件组件. 现在来总结一下这两种组件区别: 非单文件组件: 一个文件里 ...
vue使用脚手架的单文件组件环境搭建
每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题,配置好几次,以此记录. 组件把一个页面拆分成一堆组件,每个组件都有自己的html.css 作用:简化项目编程,复用编码,提高运行效率单文件组 ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...

Vue自定义组件——非单文件组件

使用 component 或 components

组件嵌套在自定义组件的components 中配置其他组件

vue实例（vm）或组件实例中的$children数组就是其所包含的组件或子组件

Vue自定义组件——非单文件组件相关推荐

最新文章

热门文章

Vue自定义组件——非单文件组件

使用 component 或 components

组件嵌套 在自定义组件的components 中配置其他组件

vue实例（vm）或组件实例中的$children数组就是其所包含的组件或子组件

Vue自定义组件——非单文件组件相关推荐

最新文章

热门文章

组件嵌套在自定义组件的components 中配置其他组件