自定义vue的组件
1.可以是写在其他.vue文件中
引用方式:
<script>
import packpackVue from './backpackView.vue';
export default {
name: 'note',
components: {
packpackVue
},
}
</script>
然后就可以直接用了:
<packpackVue :role="role" v-on:closeAction="closeMethod"></packpackVue>
2.通过注册vue的方式来使用,
注册又分为局部注册和全局注册
局部注册:
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
</script>
全局注册:
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
网友评论