vue组件学习
入门文章:
Vue封装组件的过程
Vue组件封装过程
● 首先,创建一个组件
● 然后,注册组件
● 接着,如果子组件需要数据,可以在props中接受定义
● 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法
组件创建方法(3)
A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下
var myCom = Vue.extend({ |
B、<template id=‘myCom’>标签创建,需要加上id属性
|
C、<script type=‘text/x-template’ id=‘myCom’>,需加id属性,同时还得加type=“text/x-template”,加这个是为了告诉浏览器不执行编译里面的代码
<script type="text/x-template" id="myCom1"> |
注册组件(2)
分为全局、局部。
A1、全局注册:一次注册( 调用Vue.component( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。
我们先用全局注册,注册上面例子中创建的myCom组件
Vue.component('my-com',myCom) |
A2、全局注册语法糖:不需要创建直接注册的写法
Vue.component('my-com',{ |
'my-com’为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。
A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值
Vue.component('my-com',{ |
B1、局部注册:只能在注册该组件的实例中使用,(vue实例内部创建,内部使用)
var app = new Vue({ |
B2、局部注册语法糖:
var app = new Vue({ |
B3、<template>及<script>创建的组件,局部注册
var app = new Vue({ |
组件间的数据传递
通过props向子类组件传递数据。通过emit事件向父类组件传递数据。
Vue中的props数据流
通过在注册组件中申明需要使用的props,然后通过props中与模板中传入的对应的属性名,去取用这些值
<!--组件调用 --> |
props写法
-
数组
props:[]
-
对象
props:{
cm:Array,
<!-- 变量 : 数据类型 -->
cm2:{
type:Array,
default:'没有',
<!-- 可以设置默认值 -->
required:true
<!-- 设置该组件使用时必须 给cm2属性传值 -->
}
}
props总结
emit
在我们的子组件要向父组件传递数据时,需要用到自定义事件。
什么是自定义事件
用于子组件向父组件传递数据
v-on不仅仅用于监听DOM事件,也可以用于组件间的自定义事件
自定义事件使用
在子组件中事件,通过$emit()来触发事件
在父组件中,通过v-on来监听子组件的事件
<div id="app"> |