Declaration of vue components
1. How to register components
- Global registration
- Partial registration
// Component registration method1. Global registration
// Vue.component('CompOne', component)
new Vue({
// Component registration method 2. Internal registration
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one></comp-one>
</div>
`
})2. data in components
const data = {
text: 0
}
const component = {
data () {
return data
},
template: `<div><input v-model="text"></div>`
}
new Vue({
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one></comp-one>
<comp-one></comp-one>
</div>
`
})
Why write data as a function and return?
A component may be used by other components. If this component points to the same object and multiple components reference the same data, changing its value in one component will change the value in the other.
return a new object. It cannot be a global object
3. props has two ways to define variables, one is v-bind, the other is literal. The latter way can only pass string, Number and Boolean
const component = {
props: {
propOne: String,
active: Boolean
},
template: `<div>
<div v-show="active">{{propOne}}</div>
</div>`
}
new Vue({
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one :active="active" prop-one="124"></comp-one>
<comp-one :active="active" propOne="145624"></comp-one>
</div>
`,
data () {
return {
active: true
}
}
})4. props transfer method
const component = {
props: {
propOne: Number,
onChange: Function
},
template: `<div>
<div>{{propOne}}</div>
<button @click="onChange"> + </button>
</div>`
}
new Vue({
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one :prop-one="test" :on-change="handleChange"></comp-one>
</div>
`,
data () {
return {
test: 0
}
},
methods: {
handleChange () {
this.test += 1
}
}
})5. $emit $on transfer data
props should abide by the Convention of one-way data flow of vue. props is the value of the parent component constraining the child component. The child component should not change the value of the parent node.
If you need to change the value passed from the parent component, you can use $emit and $on to notify the parent component of the change.
const component = {
props: {
propOne: Number
},
methods: {
onChange () {
this.$emit('change')
}
},
template: `<div>
<div>{{propOne}}</div>
<button @click="onChange"> + </button>
</div>`
}
new Vue({
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one :prop-one="test" @change="handleChange"></comp-one>
</div>
`,
data () {
return {
test: 0
}
},
methods: {
handleChange () {
this.test += 1
}
}
})6. props multiple configuration parameters
props: {
propOne: {
// type: Number,
// required: true
default: true,
validator (value) {
return typeof value === 'number'
}
}
}- Type data type passed
- Force a value to be passed when required is true
- default, not used with required. If it's an object, you also need to use the return function
- validator for custom rule validation
props simple writing
props: ['myMessage']