vue.js实例对象+组件树的详细介绍
更新时间：2017年10月20日 14:22:55 作者：吃饱撑着碎觉觉
这篇文章主要介绍了vue.js实例对象+组件树的相关资料,需要的朋友可以参考下
vue的实例对象
首先用js的new关键字实例化一个vue
el: vue组件或对象装载在页面的位置，可通过id或class或标签名
template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段，template将是我们使用的模板
**data:** 数据通过data引入到组件中
在组件中的data要以函数的形式返回数据，当不同的界面用了同一个组件时，才不会以为一个组件的值发生改变而改变其他页面的内容。
{{ }} 双括号语法里面放入数据的变量
组件注册语法糖
全局组件
A方法：
调用Vue.extend()方法创建组件构造器
调用Vue.component(组件标签,组件构造器)方法注册组件
在Vue实例的作用范围内才能够使用组件
/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
/*组件内容*/
template:…… ,
data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);
B方法（与A方法一样，只是交简单的写法）：
没有A方法中的第1步，直接调用Vue.component(标签名，选项对象)方法
/*B方法 全局组件2:*/
Vue.component('my-component2', {
/*组件内容*/
template:…… ,
data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
局部组件 使用components属性
```javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
```
子组件
创建方法和上面两种方法类似，不同的是位置是放在组件内部。
var compentChild ={
el:……,
data:……
}
component: {
el: ……,
data: {……}
components: {
'component-child': componentChild
}
}
内置组件
不需要在components里面声明组件。而是直接用标签。例如在如下的myHeader中使用内置组件,root-view、keep-alived等也是vue本身提供的一个内置组件。
var myHeader = {
template: '<component></component> <root-view></rooot-view>'
}
总结
以上所述是小编给大家介绍的vue.js实例对象+组件树的详细介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了Storybook 7.0 Beta Vue3踩坑解决记录详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
在学习vue的时候遇到很多问题,这里做一些总结,下面这篇文章主要给大家介绍了关于创建vue项目没有router、view文件夹的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue中data数据初始化方法，数据初始化是在组件实例化时发生的，在组件中，可以通过data选项来定义组件的初始数据，需要详细了解可以参考下文2023-05-05
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
这篇文章主要介绍了Vue基于vuex、axios拦截器实现loading效果及axios的安装配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue 微信授权解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue跳转页面打开新窗口，并携带与接收参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的2022-11-11
这篇文章主要介绍了vscode 开发Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要介绍了在Vue框架中,如何通过父组件的点击事件打开子组件中的弹窗并展示表格内容,主要步骤包括在父组件中定义数据属性,创建并定义子组件的弹窗和表格内容,通过props属性和自定义事件实现父子组件间的数据传递和方法调用2024-10-10
一般我们的vue项目都是单页面的,其实因为vue在工程化开发的时候依赖了webpack,webpack帮我们将所有的资源整合到一起而形成一个单页面,下面这篇文章主要给大家介绍了关于vue多页面项目开发的相关资料,需要的朋友可以参考下2022-01-01
最新评论