提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue组件

Vue组件
2023-06-13 09:12:14 时间
局部组件

只能在当前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组件内部的值

相关文章