脚本宝典收集整理的这篇文章主要介绍了深入了解Vue.js组件笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1、组件注册
Vue.component('name',{}) 创建的组件都是全局组件,它们在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。第一个参数是组件的名字,第二个参数是一个方法,可以在其中定义组件的data数据、template模板、props传值、components组件注册、computed计算属性、method方法、watch监听数据变化、以及生命周期的构子函数:beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推荐创建一个 components 目录,并将每个组件放置在其各自的文件中:
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
}
}
2、Prop
由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象,当prop是对象时,即使对象是静态的也必须使用v-bind。不要在子组件中改变prop的数据,可以在自身的data里保存一份该prop属性
Vue.component('user', {
props: ['sayHello']
})
<user say-Hello="hello!"></user>
我们可以传递静态Prop(如上),也可以使用v-bind传递动态Prop(如下)
<user :title="post.title"></user>
prop验证(控制传入组件数据的类型)
Vue.component('mycomponent',{
props:{
propZ:null, //匹配任何类型
propA:Number, //数字类型
propB:[Number,String], //多个可能的类型
propC:{
type:String,
required:true, //必填
default:'Hello' //默认
},
propD:{
type:Object, //对象类型
default:function(){ //默认函数
return {
msg:'hello'
}
}
},
propE:{
//自定义验证
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
user:Person
}
})
3、自定义事件
1、事件名建议始终使用短横线连接的方式如:my-event
2、自定义组件的 v-model:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>
4、插槽<slot>
1、组件:<base-layout>:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
<slot name="footer"></slot>
</div>
<base-layout>
<template slot='header'>
<h3>我是Header</h3>
</template>
<p>我没有名字</p>
<p>显示在默认插槽</p>
<h3 slot='footer'>具名插槽2</h3>
</base-layout>
结果:
<div class="container">
<header>
<h3>我是Header</h3>
</header>
<main>
<p>我没有名字</p>
<p>显示在默认插槽</p>
</main>
<footer>
<h3>具名插槽2</h3>
</footer>
</div>
5、动态组件与异步组件
<!-- 失活的组件将会被缓存!-->
<keep-alive> //<keep-alive>缓存组件切换状态,组件必须有名字
<component v-bind:is="currentTabComponent"></component> //is 特性来切换不同的组件
</keep-alive>
以上是脚本宝典为你收集整理的深入了解Vue.js组件笔记全部内容,希望文章能够帮你解决深入了解Vue.js组件笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。