How to pass data from parent component to child component in vue

This article mainly introduces the method of passing data from Vue parent components to child components (props). The article also introduces the implementation code of value transfer (props) between Vue parent and child components. Friends who need it can refer to it

vue page structure

When doing projects, there is often a situation where the data of this page (for example: ID number) needs to be brought to Another page to query the details of a certain data, etc. The traditional method is not to add parameters to the URL, cookie or assign values ​​​​to the "sessionStorage" and "localStorage" of H5. This is the method of passing between pages.

With the popular component-based development methods of Angularjs, React, and Vue, it has become another good solution.

Recently, some friends asked me how parameters are passed between Vue components? In fact, Vue has three ways to transfer data between components (props, component communication, slot). This time, the first way is as follows:

a Parent component content:

Introduce b sub-component import b form 'b.vue'

components: {'b-p': b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

b sub-component content:

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

As long as the value of datas in component a keeps changing, in component b The props in the subcomponent will monitor the changes in propsname in real time and render accordingly on the page. The usage method is also {{propsname}}.

PS: Let me introduce to you how to pass values ​​(props) between vue parent and child components

First define a child component and register it in the component props

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

In the parent component, introduce the child component and pass in the required value in the child component

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

This method can only be passed from the parent to the child, and the child component cannot update the parent component. The data

inside is what I compiled for you. I hope it will be helpful to you in the future.

Related articles:

Issues about value-passing in layui

How to implement a lottery system using JavaScript

Detailed answer: What impact do changes in vue have on components?

How to package using Parcel

The above is the detailed content of How to pass data from parent component to child component in vue. For more information, please follow other related articles on the PHP Chinese website!