首页 >> js开发 >> jsvue组件入门知识全梳理js大全
jsvue组件入门知识全梳理js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
组件组件概念：template是入口组件，那么挂载在template下的组件是入口组件的子组件局部组件局部组件三步口诀：声子，挂子，用子
声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象
把组件挂载到入口文件的components对象中。
在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签
声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象把组件挂载到入口文件的components对象中。在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签全局组件全局组件
Vue.component(name,options)
Vue.component(name,options)第一个参数是组件的名称第二个参数是组件的对象注意全局组件要在创建Vue实例化对象前，否则会报错
// 全局组件(要在创建Vue实例之前)
Vue.component('Vbtn', {
template: ``
})
// 1、创建一个入口组件
// 2、创建头部组件，侧边栏组件和内容组件
var Heard = {
template: `
`
}
var Aside = {
template: `
`
}
var Content = {
template: `
`
}
var App = {
template: `
class="content"/>
声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象
把组件挂载到入口文件的components对象中。
在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签
声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象把组件挂载到入口文件的components对象中。在入口文件的template中使用，可以是双闭合标签也可以是单闭合标签全局组件全局组件
Vue.component(name,options)
Vue.component(name,options)第一个参数是组件的名称第二个参数是组件的对象注意全局组件要在创建Vue实例化对象前，否则会报错
// 全局组件(要在创建Vue实例之前)
Vue.component('Vbtn', {
template: ``
})
// 1、创建一个入口组件
// 2、创建头部组件，侧边栏组件和内容组件
var Heard = {
template: `
我是头部组件
`
}
var Aside = {
template: `
我是侧边栏组件
`
}
var Content = {
template: `
我是内容组件
`
}
var App = {
template: `
`,
components: {
Heard,
Aside,
Content
}
}
new Vue({
el: "#app",
data() {
return {
msg: "这是测试"
}
},
template: `
`,
components: {
App
}
});
// 全局组件(要在创建Vue实例之前)
Vue.component('Vbtn', {
template: ``
})
// 1、创建一个入口组件
// 2、创建头部组件，侧边栏组件和内容组件
var Heard = {
template: `
我是头部组件
`
}
var Aside = {
template: `
我是侧边栏组件
`
}
var Content = {
template: `
我是内容组件
`
}
var App = {
template: `
