定义组件名的方式有两种:
①使用 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);