首页 ›  文章

vue.extend与vue.component区别

2019-12-03
</template> <script> import Vue from 'vue' // 定义初始选项 var Hello = Vue.extend({ template: `

hello, {{name}}

<button @click="welcome">欢迎标语</button>
`, data () { return { name: 'zhangsan', flag: false } } }) // 使用setTimeout是解决报#app元素找不到的警告 setTimeout(() => { // 扩展选项 new Hello({ methods: { welcome () { this.flag = !this.flag } } }).$mount('#app') }, 0) export default { name: 'App', data () { return { } } } </script>
![image.png](https://img.javascriptcn.com/f0faba13d74eacd5e6e14f8a5391533c "image.png")

应用场景:
比如我们要实现一个dialog对话框组件时,可以选择将组件插入到body还是其他节点中。

#### 2、vue.component

vue.component用于全局注册组件
大致用法:

// 注册组件,传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件,传入一个选项对象 (自动调用 Vue.extend) Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器) var MyComponent = Vue.component('my-component')

例子:
<template>
<hello></hello>
</template> <script> import Vue from 'vue' var Hello = Vue.extend({ template: `

hello, {{name}}

<button @click="welcome">欢迎标语</button>
`, data () { return { name: 'zhangsan', flag: false } }, methods: { welcome () { this.flag = !this.flag } } }) Vue.component('hello', Hello) export default { name: 'App', data () { return { } } } </script> <style> </style>
或者
<template>
<hello></hello>
</template> <script> import Vue from 'vue' Vue.component('hello', { template: `

hello, {{name}}

<button @click="welcome">欢迎标语</button>
`, data () { return { name: 'zhangsan', flag: false } }, methods: { welcome () { this.flag = !this.flag } } }) export default { name: 'App', data () { return { } } } </script> <style>
原文链接:segmentfault.com

上一篇:在vue和element-ui的table中实现分页复选
下一篇:Vue打包优化之code spliting-05
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入