Get the App
SLTechnology News&Howtos  ›  Development  › 

How to get the corresponding objects in the subcomponents by vue through props

Shulou Source: shulou.com Published: 2022-05-31 20:38:13 10月01日 Update

In this article Xiaobian for you to introduce in detail "vue how to get the corresponding objects in the sub-components through props", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "vue how to get the corresponding objects in the sub-components through props" can help you solve your doubts.

The child component defines props, and the parent component passes in data, which is used when the child component is obtained in js. If it is in html, you can render the variables directly.

I'll do it directly from the top of the code.

Js Code:

/ / in the subcomponent, define the type of the passed variable, such as props: {data: {type: Array, require: true}, status: {type: Boolean, require: false}}

We can print props directly in the lifecycle function.

Mounted () {let _ this=this; console.log (_ this._props,9999);}

Method one can directly get mounted () {let _ this=this; let {datas,status} = _ this._props; console.log (datas,999999);}, sometimes method 2 can not get it, and you can use a timer to get mounted () {let _ this=this; let {datas,status} = _ this._props SetTimeout (() = > {console.log (this._props) console.log (datas,111111)}, 2000)} method three deep copy mounted () {let _ this=this; let props = {... _ this._props} Console.log (props, "props.")}, method 4 uses watch to listen / / directly listens to data, because the variable name of the props here is data watch: {data (newData,prevData) {console.log (newData,123654789)}}

Yes, my data is an array.

Under the step-by-step use of these four methods, I finally got the data I wanted.

Read this, the "vue how to get the corresponding objects in the sub-assembly through props" article has been introduced, want to master the knowledge of this article still need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Tags: Components methods objects methods variables articles code content monitoring appropriateness functions cycles periodic functions timers that is ideas copies data arrays new knowledge Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn Apple Redmi Docker Xiaomi