<> Write it at the front
Well, I admit I was negligent , I always thought my blog would be vue Some common operations are all written , But it was not until I wrote the component that I suddenly remembered to see if there was something wrong with my blog , The transmission value between components has not been moved , ok , I admit my inferiority , I'm really afraid of the dark , I'm in a mess when the night comes … Cough , It's misplaced , sorry , I admit I forgot , I'm really tired , Whenever fans ask questions, I panic. ( I think it's wrong again )… I'm scared to write you an example , Open whole …
<> Figure out who is “ father ” Who is it “ son ”
Before I write it, I have to figure out a problem , Who is Laozi when a component is referenced , Who is the son , It was the son who was beaten , Lao Tzu , Just remember this , It was the son who was introduced , It was Laozi who introduced him , In other words, when we write common components, we usually write sub components , The parent component calls these child components .
<> use dialog Make an example [ Implement a subcomponent ]
Write a dialog assembly ：
<template> <div> <el-dialog :title="title" :visible.sync="openCurrDialog" :
width="options.width" :before-close="_closeCurrDialog"> <span>{{msg}}</span> </
el-dialog> </div> </template> <script> export default { props: { title: { type:
String, default: () => " title " }, openCurrDialog: { type: Boolean, default: false }
, options: { type: Object, default: () => { return { width: "50%" } } }, msg: {
type: String, default: () => " This is an introduction " } }, data() { return { } }, methods: {
_closeCurrDialog() { this.$emit("_closeIt", " It's closed ") } } } </script> <style> </
style>
At this point, we just need to see who needs it
<> The parent component introduces the child component
<template> <div> <el-card style="margin: 10px;"> <el-button @click=
"statusDialog = true"> open dialog </el-button> <commonDialog :msg="msg" :title=
"title" :options="currOptions" :openCurrDialog="statusDialog" @_closeIt=
"_closeCurrDialog"></commonDialog> </el-card> </div> </template> <script> import
commonDialogfrom "../commonComponents/commonDialog.vue" export default {
components: { commonDialog, }, data() { return { msg:" I'm from my father's love ", statusDialog:
false, // Current dialog Is it a display title: ' Quoted dialog', // Current dialog Title of currOptions: { width:
"30%" } } }, methods: { /** * @param {Object} val * @function _closeCurrDialog
Close current dialog */ _closeCurrDialog(val) { // What needs to be noted here is that
val It follows the function directly , Therefore, there is no need to transfer values , Just set the required parameters in the component ! console.info(val) this.
statusDialog= false }, } } </script> <style> </style>
<> effect
<> Simple explanation and points for attention
*
effect ： We have several advantages in making components , The first is to simplify the code , Improve code reusability , The same function tries to separate the common points , Define the differences , This can be used directly when there are similar functions , The second is that the transfer of data is more convenient .
* Transmission value ： Child component is used by the data of the parent component emit Encapsulate data into functions for transmission ：
* :before-close="_closeCurrDialog" // Binding a function /** * @function _closeCurrDialog
Data for parent component * @prod The function name defined here is the function name used by the subcomponent , Here's an illustration , If the value you give the parent component is a variable, it can also be passed directly */
_closeCurrDialog() { this.$emit("_closeIt", " It's closed ") }
<> The parent component receives the value of the child component
* @_closeIt="_closeCurrDialog" //_closeIt It is the name of the function defined in the subcomponent , There is no need to define shape parameters here /** *
@param {Object} val * @function _closeCurrDialog Close current dialog * @prod
What happens after receiving the value of the subcomponent , Whether it's worth it or not , None of us need to redefine the value to receive it , Just write a formal parameter in it */ _closeCurrDialog(val) {
// What needs to be noted here is that val It follows the function directly , Therefore, there is no need to transfer values , Just set the required parameters in the component ! console.info(val) this.
statusDialog= false },
<> The child component receives the value of the parent component
* Import the required sub component path import commonDialog from "../commonComponents/commonDialog.vue"
* Introducing components components: { commonDialog // You can use an alias here The form is ：“ alias ” ： commonDialog },
* Parameter transfer <commonDialog :msg="msg" :title="title" :options="currOptions" :
openCurrDialog="statusDialog" @_closeIt="_closeCurrDialog"></commonDialog>
Everything in it ： The binding values are all in the sub component props Defined , Let's look at the subcomponents props
props: { title: { type: String, default: () => " title " }, openCurrDialog: { type:
Boolean, default: false }, options: { type: Object, default: () => { return {
width: "50%" } } }, msg: { type: String, default: () => " This is an introduction " } },
props Just as a bridge for transmission , One point that needs to be noted here is that props The value defined in the data It's defined in it , Otherwise, it will be reported wrong , I will make the following mistake ：
Translated into Chinese dialect is ： Data properties “msg” Has been declared as a property . Use property defaults instead .
Fine works
Then the value you want to give the child component is normally in the parent component's data Just use it inside . In this way, the data of the operation in the parent component can be passed to the child component !
<> summary
First of all, there is no denying that data-driven and componentization are vue Two places that are quite Oxfords , So do you want to learn your own products , I don't want to talk about the importance , I will follow up on this article , This article is about the most basic usage , There are also many advanced uses , I'll update it later , I find that the more basic I write, the more people I see , forehead , Maybe we all pay more attention to the foundation , I will try to write some articles about the use of components in the future , Thank you for reading !
Technology