This is the 9th day of my participation in the More text Challenge. For details, see more text Challenge
Communication between components
Component instances are scoped alone; This means that the parent component’s data cannot and should not be directly referenced in the child component’s template. But the parent needs to communicate with the child: the parent needs to pass data to the child, and the child needs to tell the parent what’s going on inside it.
In vue.js, the parent component relationship can be summarized as props down, events up. The parent component uses props to send data to the child component, and the child component uses events to send messages to the parent component. As shown in the figure below:
Prop – Parent component passes data to child component
Prop is a custom property that the parent component uses to pass data. Child components need to explicitly declare “prop” with the props option:
Vue.component('child', {
/ / declare the props
props: ['message'].// Like data, prop can be used in templates
// It can also be used in vm instances like "this.message"
template: '<span>{{ message }}</span>'
})
Copy the code2.1 Simple value passing
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component message="Hello"></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component', {props: ['message'].template:'<h1>{{message}}</h1>'
});
new Vue({
el:'#app'
})
</script>
</body>
</html>
Copy the codeNote: The HTML feature is case insensitive. When using a non-string template, the name of the prop is changed from camelCase to Kebab-Case (separated by a dash).
2.2 The parent component passes values to the child component for dynamic binding
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component message="message"></my-component>
<template id="myComponent">
{{message}}
</template>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app'.data: {message:'hello'},components: {'my-component': {template:'#myComponent'.props: ['message']}}})</script>
</body>
</html>
Copy the code2.3 Prop is unidirectional bound by default
When a property of the parent component changes, it is transmitted to the child component, but not vice versa. This is to prevent the child component from unintentionally modifying the state of the parent component.
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<p>{{name}}</p>
<input type="text" v-model="name" />
</div>
<template id="myComponent">
{{name}}
</template>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app'.data: {name:'hello'},components: {'my-component': {template:'#myComponent'.props: ['name']}}})</script>
</body>
</html>
Copy the codeConclusion: in vuejs2.0, any attempt to modify parent component data passed in by props within a component is considered anti-pattern.
3. Customize events
We know that the parent component uses props to pass data to the child component, but what if the child component wants to pass data back? Custom events!
Each Vue instance implements the Events interface, which is:
Use $ON (eventName) to listen for events
Use $emit(eventName) to trigger the event
In addition, the parent component can use v-on directly where the child component is used to listen for events triggered by the child component.
A simple official case helps us understand:
<! doctypehtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<p>{{total}}</p>
<button-component @clicktotal="clicktotal"></buton-component>
</div>
<template id="myComponent">
<button @click="clicktotal"></button>
</template>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app'.data: {total:0},methods: {clicktotal(){
this.total += 1}},components: {'my-component': {template:'#myComponent'.props: ['name'].methods: {clicktotal(){
this.$emit('clicktotal')}}}}})</script>
</body>
</html>
Copy the codeResult: The child component is fully decoupled from its external component. All it does is fire an internal event that the parent component cares about.