父向子传值 使用自定义属性 props
步骤:
- 首先在子元素中定义props 并在里面实现基本属性
- 然后在父元素中拿到子元素标签,实现子元素定义的属性
子元素定义自定义属性
props:{
init:{
default:0,
type:Number,
required:true
}
}
props可以是一个数组形式 ,也可以是一个对象形式
数组形式比较局限 比如prips:["init","setData"]
prips:["init","setData"] 代表在子元素中定义了 两个属性 ,分别是 init 和 setData
一般props定义成对象 如上图
default :代表默认值
type:代表属性的类型
required:true 强制传
父亲:
<MyCount :init="9"></MyCount>
这个 地方MyCount 是子控件的 定义标签
init是 子控件props里面定义的属性
init前面的冒号 :init代表着v-bind属性绑定
扩展:
引用组建 有两种方式 ,我只会两种
第一种:哪里需要引用那里
第二种:定义全局组建
上面用的是第二种 定义的全局的组建
第一种定义方式如下:
- script中导包
- components中声明
- 标签中引用
// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
// 2. 注册组件
components: {
Left,
Right,
}
//3.实现引用
<Left></Left>
第二种方式定义如下:
- main.js中导包
- 调用Vue.compontent("定义的标签名",定义的包接受名)
- 需要的地方引用 定义的标签名
1.导包
import Count from '@/components/Count.vue'
2.定义组件
Vue.component("MyCount",Count)
3.使用标签
<MyCount></MyCount>