组件注册
1.组件名：建议组件名的定义不要省略，命名规则为字母全小写-且包含一个连字符my-component-name kebab-case
2.组件名使用PascalCase：也可以使用PascalCase来命名组件MyComponentName，在单文件组件的方式引用时my-component-name和MyComponentName都有效。而在Dom(非字符串的模板)中使用时，只能识别kebab-case（小写加-）
3.components
var ComponentB = {
components: {
'component-a': ComponentA,
ComponentC
}
}
在components中，key：value，或者key的方式都可以，只有一个key说明该组件的名称就是key所对应的字符串，value为key对应的对象值
4.全局注册一定是在根vue实例下的
5.局部注册：像我们通常在单文件中引入并声明当前实例的components的方式属于局部注册
6.基础组件的自动化全局注册：有些组件属于基础组件，每个页面都要使用 ，这种情况可以用全局注册基础组件，具体参考示例代码
prop
1.命名：大小写不敏感，kebab-case和camelCase都可以
2.prop类型：支持对String Number Boolean Object Array Function Date Symbol 自定义类或者方法,类型进行验证，同时也可以是一个自定义的构造函数。传入不符合类型的值会给出错误提示（开发环境构建的版本）但代码还是能正常执行
3.传入一个对象的所有属性：v-bind不带参数
<blog-post v-bind="post"></blog-post>
<!--等价于-->
<blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post>
4.单向数据流：通过prop可以将数据从父级传向子级，而不能反过来。父组件更新，子组件对应的prop也会跟着更新。对象和数组是引用传递，如果父组件传递的prop是对象或数组，在子组件中对其改变，也会改变父组件的prop 建议不要这样在子组件中改变prop
如果非要改变，可以用以下两种方式
#定义一个本地data属性并将prop作为其初始值
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
#使用prop初始值定义计算属性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
5.非prop的特性：非prop是指给父组件传了一个子组件并没有定义的特性。此特性会被添加到子组件的根元素上。
6.prop替换与合并：父组件如果传递给一个子组件已有的prop，则父组件传递的prop会替换子组件的prop，但如果该prop是style或者class，则会进行合并
7.特性继承 :inheritAttrs:true 默认为true，为false表示禁用继承，通常和$attrs一起使用，就可以手动决定这些特性会被赋予哪个元素
#子组件
<template>
<label>
{{label}}
<input v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs:false,
props:["label"]
}
</script>
#父组件
<base-input data-data-picker="activated" label="姓名" class="username-input" placeholder="Enter your username" >
</base-input>
使用inheritAttrs:false和v-bind attrs解析出的html如下
自定义事件
自定义的事件名对大小写敏感，v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。建议始终用kebab-case来命名事件
1.自定义组件v-model ：组件的v-model默认会利用名为value的prop和名为input的事件。但也可以用以下方式使用
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean //组件中checked prop不能少
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>
lovingVue的值将会传入到名为checked的prop，当<base-checkbox>触发一个change事件并附带一个新值时，lovingVue的属性将会被更新
- 原生事件绑定到组件：
<div id="app">
<my-comp @click.native="doThis"></my-comp>
<div @click="doThis">我是元素</div>
</div>
<script>
Vue.component('my-comp', {
template: '<div>我是组件</div>'
});
new Vue({
el: '#app',
methods: {
doThis: function() {
console.log('click');
}
}
});
</script>
*点击我是组件 我是元素 都可以触发doThis函数，如果组件click事件去掉native修饰将不会触发doThis事件，因为Vue把它当做组件的自定义事件了，而组件的自定义事件的触发需要使用this.$emit(click') *
3.sync：通过sync可以实现父子组件的双向绑定
#子组件
export default {
props: ["label"],
data: function() {
return { copyLabel: this.label };//不要直接对父组件传过来的prop进行修改，可以copy一份新的data出来
},
methods: {
methodName() {
this.copyLabel = "1234567";
this.$emit("update:label", this.copyLabel);
}
}
#父组件
<base-input @click.native="click" data-data-picker="activated" :label.sync="text" class="username-input" placeholder="Enter your username" >
</base-input>
方法methodName触发时，执行update:label方法，并将copyLabel值传递过去
:label.sync="text" 其实是v-on:update:label="val=>text=val"的语法糖
当对多个属性进行同步时，也可以直接v-bind.sync="obj",这样会把 doc 对象中的每一个属性都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
9/100
网友评论