YouTipVue Component
Tutorial -- Learning not just technology, but dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
Vue.js Tutorial
Vue.js Tutorial
Vue.js Installation
Vue.js Directory Structure
Vue.js Getting Started
Vue.js Template Syntax
Vue.js Conditional Statements
Vue.js Loop Statements
Vue.js Computed Properties
Vue.js Watch Properties
Vue.js Style Binding
Vue.js Event Handling
Vue.js Forms
Vue.js Components
Vue.js Components - Custom Events
Vue.js Custom Directives
Vue.js Routing
Vue.js Transitions & Animations
Vue.js Mixins
Vue.js Ajax(axios)
Vue.js Ajax(vue-resource)
Vue.js Responsive Interfaces
Vue.js Instances
Vue.js Forms
Vue.js Components - Custom Events
Deep Dive
Computer Science
Scripting Languages
Web Design & Development
Programming
Development Tools
Web Services
Programming Languages
Scripts
Software
Web Service
Vue.js Components
Components are one of the most powerful features of Vue.js.
Components can extend HTML elements and encapsulate reusable code.
The component system allows us to build large applications with small, independent, and reusable components. The interface of almost any type of application can be abstracted into a component tree:
The syntax for registering a global component is as follows:
Vue.component(tagName, options)
`tagName` is the component name, and `options` is the configuration options. After registration, we can use the component in the following way:
Global Components
All instances can use global components.
Global Component Example
Register a simple global component `tutorial` and use it:
// Register
Vue.component('tutorial', {
template: '
var Child = {
template: '
// Register
Vue.component('child', {
// Declare props
props: ['message'],
// Can also be used in the vm instance like "this.message"
template: '{{ message }}'
})
// Create root instance
new Vue({
el: '#app'
})
Try it »
Dynamic Props
Similar to using `v-bind` to bind HTML attributes to an expression, you can also use `v-bind` to dynamically bind the value of props to the parent component's data. Whenever the parent component's data changes, the change is also passed down to the child component:
Prop Example
// Register
Vue.component('child', {
// Declare props
props: ['message'],
// Can also be used in the vm instance like "this.message"
template: '{{ message }}'
})
// Create root instance
new Vue({
el: '#app',
data: {
parentMsg: 'Parent component content'
}
})
Try it »
The following example uses the `v-bind` directive to pass `todo` to each repeated component:
Prop Example
Vue.component('todo-item', {
props: ['todo'],
template: '{{ todo.text }} '
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Tutorial' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
Try it »
Note: Props are one-way data flow: when the parent component's property changes, it is passed down to the child component, but not the other way around.
Prop Validation
Components can specify validation requirements for props.
To customize prop validation, you can provide an object with validation requirements for the values in props, instead of a string array. For example:
Vue.component('my-component', {
props: {
// Basic type check (`null` and `undefined` will pass any type check)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with default value
propD: {
type: Number,
default: 100
},
// Object with default value
propE: {
type: Object,
// Object or array default must be returned from a factory function
default: function () {
return { message: 'hello' }
}
},
// Custom validation function
propF: {
validator: function (value) {
// This value must match one of the following strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
When prop validation fails, Vue (in development build) will produce a console warning.
`type` can be one of the following native constructors:
String
Number
Boolean
Array
Object
Date
Function
Symbol
`type` can also be a custom constructor, checked using `instanceof`.
Vue.js Forms
Vue.js Components - Custom Events
ByteDance Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable.
Configuration Guide
¥9.9
/ month
Subscribe Now
iFlytek Spark Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Subscribe Now
6 Notes
Write Note
Category Navigation
Python / Data Science
AI / Intelligent Development
Frontend Development
Backend Development
Databases
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Construction
Advertisement
Vue.js Tutorial
Vue.js Tutorial
Vue.js Installation
Vue.js Directory Structure
Vue.js Getting Started
Vue.js Template Syntax
Vue.js Conditional Statements
Vue.js Loop Statements
Vue.js Computed Properties
Vue.js Watch Properties
Vue.js Style Binding
Vue.js Event Handling
Vue.js Forms
Vue.js Components
Vue.js Components - Custom Events
Vue.js Custom Directives
Vue.js Routing
Vue.js Transitions & Animations
Vue.js Mixins
Vue.js Ajax(axios)
Vue.js Ajax(vue-resource)
Vue.js Responsive Interfaces
Vue.js Instances
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· AI Agent
· AI Evaluation and Safety Research
· AI System Architecture
· Frontier Research Trends
· Advanced NLP Techniques
· Computer Vision AI
· Deep Learning Basics
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No Records