vue component
1. 是页面组成的一部分
2. 是封装好的可重用的代码
Component registration
Global registration 1
can be roughly divided into three steps
1. After we introduce vue.js, Vue will be registered as a global object, and we use the method of the object itself to create components
Use the component method of the global object of Vue to register a component globally
2. Create a root instance and bind the view
3. Display of components: Write the name of the component price as a label inside the view to complete the display of components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--Introduce js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--3. The defined component name exists as a label, and the component is displayed on the page -->
<my-component></my-component>
</div>
</body>
</html>
<script>
//1. Use the components method built into the global formation of vue to create components
//There are two important parameters in the components method, the first parameter is the name of the component, and the second parameter is the content of the component
Vue.component('my-component', {
// use a parent tag to wrap the component here
template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
})
//2. Create a root instance, that is, instantiate a vue object, and bind the view
var vm = new Vue({
from: '#app'
})
</script>
Global registration 2
Register using the global Vue.extend() constructor
Vue.extend() is similar to inheritance. After extending (inheriting) through this constructor, it is equivalent to adding something to the Vue object itself that the object did not have before.
Partial registration 1
can be roughly divided into two parts
1. Wearing pieces and examples
2. Define components inside the instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--Introduce js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--3. This is the component placeholder tag I defined -->
<my-component></my-component>
</div>
</body>
</html>
<script>
//1. Create root instance
var vm = new Vue({
el: '#app',
//2. Create the component inside the root instance
components:{
'my-component':{
template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
}
}
})
</script>
data inside the component
The data property inside the component must be a function
parent-child component
A component contains another component inside, the inner component is called a child component, and the outer component is called a parent component, which is a parent-child component
Parent-child component communication-----solve the problem of passing values between parent and child components
Data transfer between upper and lower components, that is, communication between parent and child components
The parent component needs to pass data to the child component The self component needs to notify the parent component of what is happening inside it
Props 与 camelCase
The data transfer is divided into three steps:
1. 进行数据的传输,首先要有数据,也就是要在父组件上定义数据2. 使用props建立数据通信的渠道3. 在子组件中接收父组件通过props传递过来的数据
dynamic props
In a template, to dynamically bind the parent component's data to the child template's props, similar to binding to any normal HTML feature, use v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--Introduce js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
<div>I am the parent component</div>
<child :message="message"></child>
</div>
</template>
<template id="child">
<div>
<div>I am a child component</div>
<span>{{message}}</span>
</div>
</template>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
//I am the parent component
components:{'parent':{
template:"#parent",
data:function(){
return {
message:"hello world"
}
},
//I am a child component
components:{'child':{
props:['message'],
template:"#child"
}}
}}
})
</script>