定义组件名的方式有两种：
①使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，
你也必须在引用这个自定义元素时使用 kebab-case
例如
<my-component-name>
②使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用PascalCase(驼峰式命名)定义一个组件时，
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的.
注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
传值&传引用：
传值：String Number Boolean
传引用：Array Object
(如果传的是引用，改变一个地方的数据，所有跟引用相关的数据都会发生变化。如果传的是值，则不会。)父组件向子组件传值：
在组件上绑定属性：v-bind:property="value"，
其中property为绑定的属性名，value为需要传的值(父组件数据中的属性名)
在子组件里用props:["property"] 接收父组件传的值，其中property为组件上绑定的属性名
示例：
父组件：
data(){ return { test: [{ name: "Amor", sex: "man", age: 18 }] }; }
组件(组件名为child)：
<child v-bind:users="test"></child>
子组件接收值：
props:["users"]
或props: { users: { type: Array, required:true } }
子组件向父组件传值：
子组件注册事件：
this.$emit(事件名, value);
父组件监听事件：
组件上：
v-on:事件名="自定义方法名($event)"，
其中$event接收子组件传过来的值，此参数必须为$event
示例：
①脚手架
子组件：
methods: { send(){ this.$emit(change, "我是传递的值！"); } }
组件(组件名为child)
<child v-on:change="receive($event)"></child>
父组件：
methods:{ receive(data){ console.log(data); // "我是传递的值！" } }
组件注册&引用：
全局注册:
Vue.component('my-component-name', {
// ... 选项 ...
})
局部注册:
new Vue({ el: '#app' components: { 'component-a': ComponentA, 'component-b': ComponentB } })
①脚手架：
import 自定义组件名1 from '组件1路径';
import 自定义组件名2 from '组件2路径';
父组件：
components: {
自定义组件名1,
自定义组件名2
}
脚本:
# 注意：
data
类型：Object | Function
限制：组件的定义只接受 function
实例：
# test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="test.js"></script> </head> <body> <div id="test"> <test v-bind:title="title" v-on:from_child="getValue($event)"></test> </div> </body> </html> <script type="text/javascript"> var vm = new Vue({ el: "#test", data(){ return { title: "This is Vue.js!" }; }, methods:{ getValue:(data)=>{ console.log(data); } } }); </script>
#test.js
Vue.component("test",{ template: ` <div> <p>Hello,world!</p><p>{{test}}</p> <p>{{title}}</p> <button @click="to_parent()">子向父传值</button> </div>`, props:["title"], data(){ return { test: "Vue.js!" }; }, methods: { to_parent:function () { this.$emit('from_child',this.test); } } });
全局注册组件：
import YourComponent from 'your-component-path';
Vue.component('tag-name', YourComponent);