This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Vue component communication (demonstrated in project)

See the column for more articles

Several implementation ideas

  • Parameter passing

  • Global Shared

    • Browser storage
    • Vuex

Parent component to child component

Mode of transmission:

Define props properties for child components

The parent component

<template> <div class="home"> <img alt="Vue logo" src=".. /assets/logo.png"> <HelloWorld v-bind:username="username"/> <HelloWorld v-bind:username="'123'"/> <! </div> </template> <script> Vue // @is an alias to/SRC import HelloWorld from '@ / components/HelloWorld. Vue / / to create local components export default {name:' Home ', the components: { HelloWorld }, data() { return { username: 'ABC' } } } </script>Copy the code

Child components

<template> <div class="hello"> <h1> component communication </h1> <p> username: {{username}}</p> </div> </template> <script> export default {name: 'HelloWorld', props: ['username'], data() { return { price: 35 } }, methods: { } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }. Text -danger {color: #f00}. Panel {background-color: rgba(151, 177, 231, 0.918); padding: 50px; p { background-color: #fff; padding: 20px; } } </style>Copy the code

Add data type validation

 name: {
     type: String,
     required: true
 }
Copy the code

Setting defaults

Name: {type: String, default: "**"}Copy the code
<template> <div class="hello"> <h1> component communication </h1> <p> username: {{username}}</p> </div> </template> <script> export default {name: 'HelloWorld', props: { username: { type: String, require: true } }, data() { return { price: 35 } }, methods: { } } </script>Copy the code

Type Indicates the supported type

String: String

Number: digital

Boolean: the Boolean value

Array: an Array of

Object: the Object

Date: the Date

Function: method/Function

Symbol

Child component to parent component

Fires custom events in child components

 this.$emit('myEvent')
Copy the code

Listen for events in the parent component

 <my-component v-on:myEvent="doSomething"></my-component>
Copy the code

Child components

<template> <div class="hello"> <h1> Component communication </h1> <p> Username: {{username}}</p> <input type="text" v-model="name"> <input type="button" @click=" value=" submit" > </div> </template> <script> export default { name: 'HelloWorld', props: { username: { type: String, require: true } }, data() { return { name: '' } }, methods: { submit() { this.$emit('myEvent',this.name) } } } </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }. Text -danger {color: #f00}. Panel {background-color: rgba(151, 177, 231, 0.918); padding: 50px; p { background-color: #fff; padding: 20px; } } </style>Copy the code

The parent component

<template> <div class="home"> <img alt="Vue logo" src=".. /assets/logo.png"> <HelloWorld v-bind:username="username"/> <HelloWorld @myEvent="dealEvent"/> <! </div> </template> <script> Vue // @is an alias to/SRC import HelloWorld from '@ / components/HelloWorld. Vue / / to create local components export default {name:' Home ', the components: { HelloWorld }, data() { return { username: 'ABC' } }, methods: { dealEvent(data) { console.log(data) } } } </script>Copy the code