初学vue，组件及插槽

组件是为了解决复用而诞生的

创建组建

定义创建，名为todo-item的组件

效果：

另一种写法

点击事件

当点击删除时会出现相应 Hello World弹框

Vue.component("todo-item",{
    
    
    props:{
        title:String,
        del:{
            type:Boolean,
            default:false
   		}
    },
    
    template:'
' +
        '        {{title}}\n' +
        '        {{title}}\n' +
        '        删除\n' +
        '    
',
    data:function () {
    	return{}
    },
    methods:{
        handleClick(){
        	alert("Hello World")
        }
    }
})

使用子组件向父组件传值

Vue.component("todo-item",{
    
    
    props:{
        title:String,
        del: {
            type: Boolean,
            default: false
        }
    },
    
    template:'
' +
        '        {{title}}\n' +
        '        {{title}}\n' +
        '        删除\n' +
        '    
',
    data:function () {
  		return{}
    },
    methods:{
        handleClick(){
            alert("Hello World")
			
            this.$emit("delete",this.title)
   		}
    }
})

Vue.component("todo-list",{
    template:
        '
\n' +
        '	\n' +
        '
',
    data:function () {
        return{
            
            list: [{
                title: "课程-1",
                del: false
            },
            {
                title: "课程-2",
                del: true
            }]
    	}
    },
    methods:{
        handleDelete(val){
        	alert(val)
        }
    }
})

var vm = new Vue({
	el:"#app"
}

插槽

​ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。