This blog post is used to record
.vue
How to use the component.
You can put the component code according totemplate
、style
、script
To the corresponding.vue
In the file.
Template (
template
), initial data (data
), accepted external parameters (props
), methods (methods
), life cycle hook function (lifecycle hooks
)。
Basic steps
Inhtml
Components Used in
<div id="app">
<my-component></my-component>
</div>
To use a component, you first need to create a constructor:
var myComponent = Vue.extend({
template: `<p>myComponent</p>`
})
To use this constructor as a component, you need to useVue.component(tag, constructor)
Registration:
Global registration
// 全局注册组件,tag 为 my-component
Vue.component('my-component', myComponent)
Vue.component('my-component', MyComponent)
This isGlobal registrationThe first parameter isName of the registered componentThe second parameter isComponent constructor;
The of the option objecttemplate
Property is used to define what the component will renderHTML
;
Local registration
new Vue({
el: '#app',
components: {
'my-component': myComponent
}
})
Child components can only be found in the parent component’stemplate
To be used in.
Component option issues
When defining options for a component,data
Andel
Option must use function.
Ifdata
Option points to an object, which means that all component instances share onedata
.
So you should use a function asdata
Option to let this function return a new object:
Vue.component('my-component', {
data: function () {
return {a: 1}
}
});
Similarly,el
Options forVue.extend()
The middle time must also be a function.
Data transfer
There are three ways to transfer data between Vue.js components:
- props
- Component communication
- slot
props
propsIs a field of component data that is expected to be passed down from the parent component. Because ..The scope of the component instance is isolatedTherefore, the subassembly needs to explicitly use theprops
Option to get the data of the parent component.
props
The options can beLiteral quantity、Expression、Binding modifier.
Literal quantity
<div id="app">
<child msg="hello!"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['msg'],
// prop 可以用在模板内
// 可以用 this.msg 设置
template: `<span>{{msg}} Are you tired?</span>`
});
new Vue({
el: "#app"
})
</script>
HTML
Features are not case sensitive. The name form iscamelCase
Theprop
When used as a feature, you need to convert tokebab-case
(separated by dashes):
<div id="app">
<child my-message="hello!"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['myMessage'],
template: `<span>{{myMessage}} Are you tired?</span>`
});
new Vue({
el: "#app"
})
</script>
Dynamic
Usev-bind
Binding dynamicsprops
Data to parent component. Every time the data of the parent component changes, it is also transmitted to the child component.
<div id="app">
<input v-model="parentMsg"><br>
<child :my-message="parentMsg"></child>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
Vue.component('child', {
props: ['myMessage'],
template: `<span>{{myMessage}} Are you tired?</span>`
});
new Vue({
el: "#app",
data: {
parentMsg: 'hello!'
}
})
</script>
Binding type
You can use binding modifiers:
.sync
, two-way binding.once
, single binding
<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>
prop
The default is one-way binding: when the attribute of the parent component changes, it will be conducted to the child component, but not vice versa.
However, it should be noted that ifprop
Is an object or array passed by reference. Modifying it within a child component affects the state of the parent component, regardless of the binding type used.
Prop type validation
Vue.component('example', {
props: {
propA: Number,// 基础类型检测 (`null` 任何类型)
propM: [String, Number],// 多种类型 (1.0.21+)
propB: {// 必需且是字符串
type: String,
required: true
},
propC: {// 数字,有默认值
type: Number,
default: 100
},
propD: {// 对象|数组的默认值应当由一个函数返回
type: Object,
default: function () {
return {msg: 'hello'}
}
},
propE: {
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
twoWay: true
},
propF: {// 自定义验证函数
validator: function (value) {
return value > 10
}
},
propG: {
// 转换函数(1.0.12 新增)
// 在设置值之前转换值
coerce: function (val) {
return val + '';// 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val);// 将 JSON 字符串转换为对象
}
}
}
});