Vue组件的应用:

1、基础使用:第一步创建组件,第二步注册组件,第三步使用组件。在注册组件是需要用到template的属性。

全局组件和局部组件

组件的嵌套(父子组件):注意先后顺序,先声明,后面才能用

2、组件的语法糖:直接在声明的时候直接进行组件的构造,省去了extend()的步骤

// 2、注册组件

Vue.component('cpn1', {

template: `

<div>

</div>

`

})

组件分离写法:通过id来定位使用哪个组件

3、组件中数据存放的问题:组件里面不可以访问Vue实例中的Data数据,但组件(也可以有methods)中可以有自己的Data,不过此Data必须是一个函数,返回一对象:

组件中data为什么一定是函数:如果不是函数,可能造成数据在多次引用的时候,会出现相互影响的错误,所以要用函数来返回数据,这样每次引用组件的时候,新生成一个对象,每个对象保存自己的状态值。如下图的例子,引用了两次组件,但是修改一个组件的值时,并不会影响到另外一个所引用组件的值。

 

4、父组件向子组件传递数据用:props,在传数据时一定要用动态绑定的属性v-bind 或 糖语法 : 冒号

props的数据验证:

 

5、子组件向父组件传递数据:用自定义事件$emit()

子组件定义事件

父组件通过v-on监听子组件事件

6、小结:

 

Logo

前往低代码交流专区

更多推荐