(精华)2020年7月12日 vue 组件component的使用
2020-07-14 06:00
411 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <hello></hello> <my-world></my-world> <!-- <myWorld></myWorld> --> </div> <script> // 方式1:先创建组件构造器,然后由组件构造器创建组件 // 1. Vue.extend创建组件构造器 var mycom = Vue.extend({ template: '<h2>hello word</h2>' }); // 2. Vue.component(组件名,组件构造器) Vue.component('hello', mycom); // 方式2:直接创建组件 (推荐) Vue.component('my-world', { template: '<h2>世界, 你好</h2>' }); var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root el: '#app', data: { msg: '啦啦啦' } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件的分类 全局组件、局部组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="itapp"> <my-hello></my-hello> <my-world></my-world> </div> <div id="app"> {{name}} <my-hello></my-hello> <!-- <my-world></my-world> --> </div> <script> // 全局组件 可以在所有的vue实例中使用 Vue.component('my-hello',{ template:'<h2>我是全局组件</h2>', data(){ //在组件中存储数据时,必须以函数形式,函数返回一个对象 return { name:'laney' } } }); /** * 局部组件,只能在当前vue实例中使用 */ var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root el:'#itapp', data:{ msg:'软谋' }, components:{ 'my-world':{ template:'<h2>世界, 你好 {{age}}</h2>', data(){ return { age:'20' } } } } }); new Vue({ //这里的vm也是一个组件,称为根组件Root el:'#app', data:{ name:'tom' } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="flag='my-hello'">显示hello组件</button> <button @click="flag='my-world'">显示world组件</button> <!-- 默认每次都会销毁非活动组件并重新创建 缓存,避免重新渲染, --> <keep-alive> <component :is="flag"></component> </keep-alive> <!-- <my-world></my-world> --> </div> <template id="wbs"> <div> <h3>{{msg}}</h3> {{time}} <ul> <li v-for="(item,index) in arr" :key="index">{{item}}</li> </ul> </div> </template> <script> var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root el:'#app', data:{ msg:'软谋', flag:'my-hello' }, components:{ 'my-world':{ name:'wbsx', template:'#wbs', data(){ return { age:'20', msg:'world', arr:['tom','jack','laney'], time:Math.random() } } }, 'my-hello':{ template:'<h2>我是my hello {{time}}</h2>', data(){ return { time:Math.random() } } } } }); </script> </body> </html>
相关文章推荐
- (精华)2020年7月12日 vue 非父子组件相互传参(发布订阅)
- (精华)2020年7月12日 vue 模板template的使用
- vue插件(自定义组件或js文件使用),vue.extend(),vue.component()注册组件
- vue中component组件的props使用详解
- Vue.js组件component关于分页功能、自定义事件的$.Emit()的使用
- vue2.0多条件搜索组件使用详解
- vue-cli 组件的导入与使用教程详解
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- Vue中使用组件
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- vue中使用ElementUI 、iView 等vue组件库
- 很多人不知道可以使用这种 key 的方式来对 Vue 组件进行重新渲染!
- Android使用ComponentName组件简单示例
- Vue.js之组件(component)
- vue-cli中使用Element(vue2.0桌面端组件库)
- 使用Vue制作切口盒子组件
- vue引入组件无法显示且报错[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
- vue2.0使用swiper组件实现轮播效果
- (五)vue开发 - 使用 vue-layer-mobile组件实现toast,loading效果
- 问题杂记-Vue组件中使用地址引入图片