Vue组件
局部组件
只能在当前vm对象中使用
定义方法
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
let vm = new Vue({
el:'#app',
data:{
result:0
},
components:{
cmp1:{
template:`<div>Hello word</div>`
}
}
})页面中使用
<div id='app'>
<cmp1></cmp1>
</div>或者在vm对象中使用
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
let vm = new Vue({
el:'#app',
data:{
result:0
},
template:`<div><cmp1/></div>`,
components:{
cmp1:{
template:`<div>Hello word</div>`
}
}
})需要注意的是在Vue中组件也可是一个vm对象，所以组件也可有data
如下示
data必须为一个函数，然后在返回json。
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
let vm = new Vue({
el:'#app',
data:{
result:0
},
template:`<div><cmp1/></div>`,
components:{
cmp1:{
data(){
return {name:"tzh"}
},
template:`<div>Hello {{name}}</div>`
}
}
})全局组件
可在任意地方调用
定义方法
//组件 cmp1.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('cmp1',{
data(){
return {name:'txh'}
},
template:`<div>Hello {{name}}</div>`
})
//vm.js
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import './cmp1.js';
let vm = new Vue({
el:'#app',
data:{
result:0
},
template:`<div><cmp1/></div>`
})组件传参
//vm.js
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import './cmp1.js';
let vm = new Vue({
el:'#app',
data:{
result:0
},
//像组件传递参数 name1
template:`<div><cmp1 name1="test"/></div>`
})
//cmp1.js
//接收参数并显示
import Vue from 'vue/dist/vue.esm';
export default Vue.component('cmp1',{
props:["name1"],//指定接收的参数
data(){
return {name:'txh'}
},
template:`<div>Hello {{name1}}</div>`
})需要注意的是每次向组件传递的参数都是字符串，如果传递一个数组，则不能正常显示，解决办法在参数前面加冒号
//vm.js
template:`
<div><cmp1 name1="test" :list="[1,2,3,4,4]"/>
</div>`
//cmp1.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('cmp1',{
props:["name1","list"],//指定接收的参数
data(){
return {name:'txh'}
},
template:`<div>Hello {{name1}}
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>`
})
动态组件
根据不同类型显示不同组件 通过<component is></component>设置要显示的组件
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import './cmp1.js';
let vm = new Vue({
el:'#app',
data:{
type:'cmp1'
},
template:`
<div>
<component :is="type"></component>
</div>
`
})组件测试
将组件实例化进行测试，通过挂载到虚拟html页面的方式
//cpm1.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('cmp1',{
props:["name1","list"],//指定接收的参数
data(){
return {name:'txh'}
},
template:`<div>Hello {{name1}}
</div>`
})
//vm.js
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import Cmp1 from './cmp1.js';//引入组件
//实例化组件
let cmp = new Cmp1({
propsData:{
name1:"组件测试",
list:[1,2,3,342234,23]
}
});//创建好组件对象
let vm=cmp.$mount();//挂载的虚拟html
console.log(vm.$el)
//<div>Hello 组件测试</div>插槽
常用于各种小块，如对话框，警告框等等 插槽定义小块布局，内容动态传入 如下 dialog.js
//dialog.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('my-dialog',{
template:`
<div>
<h1>对话框</h1>
<slot/></div>
`//slot =占位符用于动态设置内容
}
//vm.js
import Vue from 'vue/dist/vue.esm';
import MyDialog from './my-dialog';
let vm = new Vue({
el:'#app',
template:`
<div>
<my-dialog>
确定要删除吗？
</my-dialog>
</div>
`
})显示效果
具名插槽
就是含有名字的查找，克将数据指定到相应的的插槽，如不指定则显示在未命名的插槽(<slot/>)
//dialog.js
import Vue from 'vue/dist/vue.esm';
export default Vue.component('my-dialog',{
template:`
<div>
//定义一个插槽名
<h1><slot name="title"></h1>
//默认插槽
<slot/></div>
`//slot =占位符用于动态设置内容
})
//vm.js
import Vue from 'vue/dist/vue.esm';
import MyDialog from './my-dialog';
let vm = new Vue({
el:'#app',
template:`
<div>
<my-dialog>
//指定显示的插槽，必须用template slot=插槽名
<template slot="title">自定义标题</template>
确定要删除吗？//为指定显示在默认插槽
</my-dialog>
</div>
`
})
作用域插槽
插槽有自己的作用域
//a.vue
<div>
<slot value="123"></slot>
</div>
//b.vue
import A from a.vue
<A slot-scope="props">{{props.value}}</A>//如果b.vue也有value此时显示的是a.vue组件内部的值本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-05-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
