Preface
In the previous article, the registration of components was introduced, including local registration and global registration. Here will introduce the parent-child components and the communication between the parent-child components.
Parent-child component
The parent-child component, as the name implies, is to apply components to form a parent-child relationship in the component. A simple example is as follows:
<body>
<div id="app">
<father> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
template:`
<div>
<h1>父组件</h1>
<child></child>
</div>`,
components: {
child:{
template:`<h1>子组件</h1>`
}
}
}
}
})
</script>
</body>
The above is the definition of the simplest parent-child component. I mentioned that the instance is a component, so the object properties in the instance can also be declared in the component. Defining the parent-child object is relatively simple, let's talk about how the parent-child component transmits data.
Parent-child components pass data
First introduce an attribute props, it is an array, the function is to receive the value passed in:
<body>
<div id="app">
<father title="这里是标签"> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
props:["title"],
template:`
<div>
<h1>父组件</h1>
<h1>{
{title}}</h1>
<child></child>
</div>`
}
}
}
})
</script>
</body>
<!--
渲染效果：
父组件
这里是标签
-->
We directly declare a variable in the component tag to receive the value, and at the same time use props to receive it, and finally can be directly applied to the syntax supported by Vue. Although only a string is passed, in fact it can pass all types of JavaScript. Like the naming format of components, "camel case naming" can be used in JavaScript, but dashes are required in html, except for template strings.
Like this, we already know that we can pass a static value to prop like this:
<father title="这里是标签"> </father>
Prop can also be dynamically assigned via v-bind, for example:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
After we know the dynamic value transfer, the rest is easy, because the parent-child component transfer value depends on v-bind dynamic assignment:
new Vue({
el: '#app',
components:{
father:{
data(){
return{
msg:"白月光与朱砂痣"
}
}
template:`
<div>
<h1>父组件</h1>
<child :msg="msg"></child>
</div>`,
components: {
child:{
props:["msg"],
template:`<h1>子组件{
{msg}}</h1>`
}
}
}
}
})
As shown above, the msg data is first defined in the father component, and then bound to the sub-components by dynamically passing values, then the passed parameters are received with props, and finally rendered in the interpolation syntax.
Parent-child component transfer method
new Vue({
el: '#app',
components:{
father:{
data(){
return {
msg:""
}
},
methods:{
fatherFunction(value) {
this.msg=value
alert("白月光与朱砂痣"+value)
}
},
template:`
<div>
<h1>父组件 {
{msg}}</h1>
<child @father-function="fatherFunction"></child>
</div>`,
components: {
child:{
template:`<h1 @click="childFunction">子组件</h1>`,
methods:{
childFunction(){
this.$emit("father-function","，你想起她的好")
}
}
}
}
}
}
})
In the above, two functions are mainly realized, one is to pass the method of the parent component to the child component, and the other is to pass the data of the child component to the parent component.
When passing the method, the properties need to v-onbe specified. Unlike components and props, the event name will not be used as a JavaScript variable name or property name, so there is no reason to use "camel case naming". And v-onevent listeners are automatically converted in the DOM template for all lowercase (since HTML is not case-sensitive), it v-on:myEventwill become v-on:myevent- lead myEvent not be listening to, so when the memory transfer recommendation dash Line naming, "camel case naming" will not work.
After being passed to the child component, the child component needs to define another method, and the method in the child component is this.$emit("事件名")"called through . The first parameter is the method name, and the following parameters are the properties of the method. Here a string is passed, and the data is passed to the data in the parent component by calling the method of the parent component through the child component.