It is to pass in component options and return a subclass of Vue, which can also be regarded as a component constructor.
example:
You can register this vue subclass globally
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>existVueRegister components in</title>
</head>
<body>
<div >
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="/npm/vue " type="text/javascript"></script>
<script>
/**
* Note that extend creates a component constructor, not a specific component instance.
* So he cannot use it directly in new Vue: new Vue({components: fuck})
* In the end, you have to register to use it.
*/
// Build a child componentvar todoItem = ({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
})
// Build a parent componentvar todoWarp = ({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text=""
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// Local registration subcomponents components: {
todoItem: todoItem
}
})
// Register to global('todo', todoWarp)
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'vegetable' },
{ id: 1, text: 'cheese' },
{ id: 2, text: 'Whatever others eat' }
]
}
})
</script>
</html>mixins can add some methods or attributes globally to facilitate calls to all components. Can be used to add common object references and methods,
When mixing in, the created mixed in is executed first and then the created in the component will be executed. When the method conflicts, the current component will be used.
example:
({
data:{
//The component can use this.$axios to call the axios method, which is very convenient $axios: axios
},
methods: {
//Each component takes user information from the global store getUser() {
return ;
}
}
})It is a plug-in registration method, which is to register the component instances of the function new to Vue's Options.
The essence is that in the Options of the global Vue instance, a key/value is the component instance. Due to the component
Options will inherit Vue's Options, so this component can be called in any component.
('global-component', (baseOptions));This is the original call method, registering a component.
Vue has simplified it internally, and calls can be omitted and only Options can be passed in.
//Passing in an option object (automatically called), which is equivalent to the uplink code.('global-component', baseOptions);Summary
The above is personal experience. I hope you can give you a reference and I hope you can support me more.