Vue的插槽的使用

定义相关的子组件，Vue.component
里面定义的相关的子组件名字，可以手动的进行引入，如：todo
里面用slot进行连接
使用v-bind:title或者直接用:title进行相关的绑定，v-for=""里面还可以使用index进行遍历。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://blog.csdn.net/pekaboo/article/details/107398478 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://blog.csdn.net/pekaboo/article/details/107398478"></script>
</head>
<body>
    <div id="app">
        {
    
    {
    
    message}}
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"> </todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item=item v-bind:index="index" v-on:remove="removeItems"></todo-items>

        </todo>

 </div>

  <!-- 插槽 -->

   


    <script>
        // 定义一个父组件
Vue.component("todo",{
    
    
    template:'<div><slot name=\'todo-title\'> </slot><ul><slot name=\'todo-items\'> </slot></ul></div>'
});
// 定义一个子组件 标题组件
Vue.component("todo-title",{
    
    
    props:['title'],
    template:"<div>{
    
    {title}}</div>"
});
// 定义一个子组件 内容
Vue.component("todo-items",{
    
    
    props:['item','index'],
    template:"<li>{
    
    {index}}-----{
    
    {item}}<button v-on:click='remove'>删除 </button></li>",
    methods:{
    
    
        remove(){
    
    
            // remove为上面 的slot里面的绑定的 v-on:remove="removeItems"
            this.$emit('remove',index);
        }
    }
})
        var vm=new Vue({
    
    
            el:'#app',
            data: {
    
    
                message: "success",
                title:'标题2',
                items: ["刘总","侯总","陈总","李哥"]
            },
            mounted() {
    
    
			// //查询是否存在该询价单号对应的信息
			// axios({
    
    
			// 	url: '/demo-service/tb-audit-opinion-form/select',
			// 	method: 'post',
			// 	data: {
    
    
			// 		cInquiryNo: this.submitForm.tbTgtEssInfo.cInquiryNo
			// 	},
			// }).then(data => { //当执行完成后的操作
			// 	this.editForm.shenhe = data.data || []; //先将查询出来的数据传入，保存
			// });

          
		},
        methods:{
    
    

            removeItems(index){
    
    
           this.items.splice(index,1);

            }
        }

        })
    </script>
</body>
</html>

猜你喜欢