1.什么是组件?
组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
2.怎么注册组件
Vue.component(): 将组件构造器注册为一个组件,并且给它起一个组件的标签名称
需要 两个参数:第一个参数是注册组件的标签名,第二个参数是组件构造器名称
注意:组件必须挂载在某个Vue实例中,否则不会生效。
<div id="app">
<!-- //使用组件 -->
<my-cpn></my-cpn>
</div>
//必须挂载在某个Vue实例中,否则不会生效
<my-cpn></my-cpn>
<script src="../vue.js"></script>
<script>
// 注册组件 (全局组件)
Vue.component("my-cpn",cpn{
data(){
}
});
new Vue({
el:'#app',
})
</script>
3.父组件与子组件
在一个组件中如果存在另一个组件,则形成了组件之间的父子关系。当两者需要数据交互时,其访问方式存在不同。默认情况下,子组件是无法访问到父组件中的data和methods,当子组件需要访问父组件data时,可以通过v-bind指令进行属性绑定,子组件访问到的数据存储在props中,props类似于data,但它是只可读的,而且其中所有的数据都是来源于父组件,而子组件的data是可读可写的,是子组件私有的。当父组件需要访问子组件数据时,可以通过this.$emit(‘方法名’, 子组件数据)方式,子组件调用父组件方法,同时把数据传递给父组件,方法名为子组件内部自定义,通过v-on指令绑定父组件函数实现调用。
prop
- Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。
- 一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。