公共组件具有更好的复用性,当然,要根据实际情况选择全局或局部组件。
全局组件
props:['init'] 可以以数组的形式定义
props:{init:{type:"类型",default:"默认值",required:"是否必传"}}
- 全局组件注册
//在 main.js 中引入全局公用组件Count.vue
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count) //组件名为 MyCount
- 引入使用
<template>
<div class="about">
<h1>This is an about page</h1>
<MyCount :init="1"></MyCount>
<!-- init 为自定义名 传入数字 1 -->
</div>
</template>
- 全局组件
<template>
<div>
我是全局组件
<hr />
{{ init }}-----{{ ab }}----{{ count }}
<button @click="count += 10">按钮</button>
</div>
</template>
<script>
export default {
name: "",
props: {
init: {
default: 0,
},
ab: {
type: String, //规定传入类型
default: "2",//默认值
required: true,//必传
},
},
data() {
return {
count: this.init,//如果要修改props 的值只能通过这种弄形式,因为props是只读的
};
},
};
</script>
局部组件
<template>
<div class="about">
<h1>This is an about page</h1>
<MyCount :init="1"></MyCount>
<!-- init 为自定义名 传入数字 1 -->
</div>
</template>
<script>
components:{
MyCount
}
<script>
-----不详之处请多多指教!