How to pass data between vue.js components
Preface
Components are one of the most powerful features of vue.js, and the scopes of component instances are independent of each other, which means that data between different components cannot reference each other. How to transfer data has also become one of the important knowledge points of components.
Component
There are different relationships between components. The relationship between father and son and brother (those who are not father and son are temporarily called brothers).
Original author: Lin Xin, author's blog:
Parent-child component
The parent-child relationship is that component A uses component B in its template, then component A is the parent. Component, component B is the sub-component.
// 注册一个子组件Vue.component('child', {data: function(){text: '我是father的子组件！'}template: '<span>{{ text }}</span>'})// 注册一个父组件Vue.component('father', {template: '<div><child></child></div>' // 在模板中使用了child组件})When using the father component directly:
<div id="app"><father></father></div>
The page will render: I am the child component of father!
The father component uses the child component in the template, so it is the parent component, and the child component is used, so the child component is the child component.
Sibling components
If two components do not reference each other, they are sibling components.
Vue.component('brother1', {template: '<div>我是大哥</div>'})Vue.component('brother2', {template: '<div>我是小弟</div>'})When using the component:
<div id="app"><brother1></brother1><brother2></brother2></div>
The page will render:
I am the big brother
I am a younger brother
Prop
If a child component wants to use the data of the parent component, we need to obtain the data passed by the parent component through the props option of the child component. Below I use the format in the .vue file to write the example.
How to pass data
Reference the child component child.vue in the parent component father.vue, and pass the value of name to the child component.
<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from './child.vue';export default {components: {child},data() {return {name: 'linxin'}}}</script>Declare the data it expects to obtain in the props option in the child component child.vue
<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: ['message']}</script>Then the page will be rendered ：Hello linxin
One-way data flow
When the name of the parent component changes, the child component will automatically update the view. But in child components, we don't want to modify props. If you must modify these data, you can use the following method:
Method 1: Assign prop to a local variable, and then modify the local variable if you need to modify it, without affecting prop
export default {data(){newMessage: null },props: ['message'],created(){this.newMessage = this.message;}}Method 2: Process prop in calculated properties
export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}Custom events
prop is one-way bound: When the properties of the parent component change, they will be propagated to the child component, but not the other way around. Modifying the prop value of a child component will not be passed back to the parent component to update the view. So how do child components communicate with parent components?
That is a custom event. By listening to the custom event in the parent component $on(eventName), when $emit(eventName) in the child component triggers the custom event, the parent component performs the corresponding operation.
For example, if you control the display of a pop-up subcomponent in the parent component, after pressing Close in the sub-component, tell the parent component to hide it, and then the parent component will perform the operation to hide the pop-up box.
<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
// @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from './dialog.vue';export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>In the child component dialog.vue:
<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: ['isShow'],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit('hide');}}}</script>This achieves mutual communication between parent and child components.
Vuex
The above examples are all based on components of the parent-child relationship, but for other levels of relationships, it is more cumbersome to implement. Then Vuex can better help you communicate in real time between various components. Regarding Vuex, you can check out my other article: Vuex modularizes the status management of to-do items
Summary
It is not necessary to use Vuex for component communication. For some simple Data transfer, prop can also be completed. This article mainly records some basic knowledge points about component parameter passing. For actual practice, you can refer to notepad as an example. Use prop to display and hide sub-components, and use vuex to implement data state management between components.
The above is the detailed content of How to pass data between vue.js components. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Use ddrescue to recover data on Linux
Mar 20, 2024 pm 01:37 PM
DDREASE is a tool for recovering data from file or block devices such as hard drives, SSDs, RAM disks, CDs, DVDs and USB storage devices. It copies data from one block device to another, leaving corrupted data blocks behind and moving only good data blocks. ddreasue is a powerful recovery tool that is fully automated as it does not require any interference during recovery operations. Additionally, thanks to the ddasue map file, it can be stopped and resumed at any time. Other key features of DDREASE are as follows: It does not overwrite recovered data but fills the gaps in case of iterative recovery. However, it can be truncated if the tool is instructed to do so explicitly. Recover data from multiple files or blocks to a single
Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation!
Apr 03, 2024 pm 12:04 PM
0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr
Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training
Apr 01, 2024 pm 07:46 PM
The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream
Slow Cellular Data Internet Speeds on iPhone: Fixes
May 03, 2024 pm 09:01 PM
Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker
Tesla robots work in factories, Musk: The degree of freedom of hands will reach 22 this year!
May 06, 2024 pm 04:13 PM
The latest video of Tesla's robot Optimus is released, and it can already work in the factory. At normal speed, it sorts batteries (Tesla's 4680 batteries) like this: The official also released what it looks like at 20x speed - on a small "workstation", picking and picking and picking: This time it is released One of the highlights of the video is that Optimus completes this work in the factory, completely autonomously, without human intervention throughout the process. And from the perspective of Optimus, it can also pick up and place the crooked battery, focusing on automatic error correction: Regarding Optimus's hand, NVIDIA scientist Jim Fan gave a high evaluation: Optimus's hand is the world's five-fingered robot. One of the most dexterous. Its hands are not only tactile
The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks
Apr 29, 2024 pm 06:55 PM
I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.
Alibaba 7B multi-modal document understanding large model wins new SOTA
Apr 02, 2024 am 11:31 AM
New SOTA for multimodal document understanding capabilities! Alibaba's mPLUG team released the latest open source work mPLUG-DocOwl1.5, which proposed a series of solutions to address the four major challenges of high-resolution image text recognition, general document structure understanding, instruction following, and introduction of external knowledge. Without further ado, let’s look at the effects first. One-click recognition and conversion of charts with complex structures into Markdown format: Charts of different styles are available: More detailed text recognition and positioning can also be easily handled: Detailed explanations of document understanding can also be given: You know, "Document Understanding" is currently An important scenario for the implementation of large language models. There are many products on the market to assist document reading. Some of them mainly use OCR systems for text recognition and cooperate with LLM for text processing.
The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training
Mar 11, 2024 pm 12:10 PM
This week, FigureAI, a robotics company invested by OpenAI, Microsoft, Bezos, and Nvidia, announced that it has received nearly $700 million in financing and plans to develop a humanoid robot that can walk independently within the next year. And Tesla’s Optimus Prime has repeatedly received good news. No one doubts that this year will be the year when humanoid robots explode. SanctuaryAI, a Canadian-based robotics company, recently released a new humanoid robot, Phoenix. Officials claim that it can complete many tasks autonomously at the same speed as humans. Pheonix, the world's first robot that can autonomously complete tasks at human speeds, can gently grab, move and elegantly place each object to its left and right sides. It can autonomously identify objects
