Vue.component("ca",{
props:["url"],
template:"<a :href=‘url‘ >{{url}}</a>"
});
在上面例子中，定义了一个组件，名称为 "ca"，我们可以在 HTML 中的 <body> 标签中 把 <ca >当成一个 HTML 的标签来使用，如下
<ca v-bind:url="message"></ca>
通过 v-bind:url="message" 可以向组件中的 props:["url"], 传入参数，参数来源于 Vue 对象中 data:{message:"https://cn.vuejs.org/v2/guide/components.html"} 定义的参数，这样就可以在组件中获取到 message 的值了
Vue.component("name-todo",{// name-todo 组件
props:["mesg"],
template:"<div> <h3>{{mesg}}</h3> <slot name=‘slot-1‘></slot> <ul> <slot name=‘slot-2‘></slot> </ul> </div>"
});
// 组件可以定义多个;
// <slot></slot> 插槽，相当于占位符，通过属性 name 来识别区分，插槽通过 组件来替代，通过在组件标签中使用属性 slot="slot-1"，引用插槽名称，表示当前组件替换到该插槽位置
Vue.component("name-todo-title",{
props:["title","title_url"],
template:"<a :href=‘title_url‘>{{title}}</a>"
});
<name-todo :title="message">
<name-todo-title slot="slot-1" v-bind:title="title" :title_url="my_url"></name-todo-title>
<name-xxx slot="slot-2" v-bind:title="xxx" :xxx="xxx"></name-todo-title>
</name-todo>
自定义标签的顺序 不会影响 HTML 页面的展现效果，只有插槽 name 的引用才会改变 页面的展现
于是有了组件方法 $emit
实例：
<body>
<div id="app">
<span :mesg="message">{{message}}</span>
<name-todo-tiems v-for="(arg,index) in args" :arg="arg" :index="index"
v-on:abc="removeArgs(index)"></name-todo-tiems>
<!--v-on:abc="removeArgs(index)" ：这是事件绑定的一种写法，常规事件绑定写法是：v-on:click="method(xxx)"
自定义一个事件，名字为：abc，将这个是绑定到 removeArgs 方法 -->
</div>
</body>
<script>
Vue.component("name-todo-tiems",{
props:["arg","index"],
template:"<ul><li>{{arg}}---<button @click=‘remove‘>删除</button></li></ul>",
methods:{
//点击 组件内定义的删除 按钮，调用 方法‘remove‘
remove:function () {
//使用 $emit() 方法来调用 HTML 页面 中定义的事件，该事件名是 abc，abc这个事件绑定了 vue 根对象中的 removeArgs 方法
this.$emit("abc",this.index)
}
}
});
var vm = new Vue({
el:"#app",
data:{
message:"一个普通的信息",
args:["视频","音药","直播"],
},
methods:{
//在组件中想办法调用这个方法，该方法能够真实的删除 data中的源数据
removeArgs:function (index) {
console.log("删除了"+this.args[index] + " 元素，OK");
this.args.splice(index,1);
}
}
});
</script>
参考：https://cn.vuejs.org/v2/guide/components.html
原文：https://www.cnblogs.com/ressso/p/12099231.html