An article briefly analyzing the problem of value transfer between parent and child components in Vue

How to pass values ​​between vue parent and child components? The following article will take you through the value transfer issues of parent components and child components in Vue. I hope it will be helpful to you!

Preface: In some pages, there is not just a pure vue file. Vue pays attention to component development, but generally interactive events will definitely occur. I learned about this today Pass value, hereby record it.

1. Parent component passes value to child component

Parent component passes value to child component and will use: Prop, generally we need to make relevant declarations in sub-components, as shown below:

The sub-component is HellowWorld.vue

<script>export default {
  name: &#39;HelloWorld&#39;,
  //接收的变量
  props: {
  //声明相关的类型
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
  }}</script>

In the parent component App.vue

<template>
  <div>
    <!-- msg为字符串类型，count为数字，options为数组 -->
    <helloworld></helloworld>
  </div></template><script>//引入组件import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      count:0,
      options:[],
    }
  },
  methods:{
  }}</script>

Then the effect on the page is:

Of course we can also write Some events are used for dynamic data interaction, for example:

2. Child component passes value to parent component

$emit is used when passing values ​​to subcomponents. It is worth noting that the method used when passing values ​​to subcomponents must have the same name as the method listened in the parent component, which is listenToChild in the example. [Related recommendations: vuejs video tutorial, web front-end development]

Helloworld.vue sub-component:

<template>
  <div>
    <!-- 文字信息 -->
    <h1 id="msg">{{ msg }}</h1>
    <!-- 数字信息 -->
    <h2 id="count">{{count}}</h2>
    <!-- 渲染数组信息 -->
    <ul>
      <li>{{item}}</li>
    </ul>
    <!-- 进行传值 -->
    <button>点击</button>
  </div></template><script>export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
    SendMsg(){
      // listenToChild  注意
      this.$emit(&#39;listenToChild&#39;,this.options)
    }
  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>h3 {
  margin: 40px 0 0;}ul {
  list-style-type: none;
  padding: 0;}/* li {
  display: inline-block;
  margin: 0 10px;
} */a {
  color: #42b983;}</style>

App.vue parent component:

<template>
  <div>
    <img  src="/static/imghwm/default1.png" data-src="./assets/logo.png" class="lazy" alt="An article briefly analyzing the problem of value transfer between parent and child components in Vue" >
    <!-- listenToChild 为子组件传来的方法 -->
    <helloworld></helloworld>
    <button>+</button>
    <button>置零</button>
    <button>-</button>
    <ul>
      <li>{{index}}，{{item}}</li>
    </ul>
  </div></template><script>import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      // 要传去子组件的参数
      count:0,
      options:[],
      // 子组件传来的参数
      data:[]
    }
  },
  methods:{
    Add(){
      this.count=Number(this.count)+1
      this.options.push(&#39;添加一次，当前数值为：&#39;+this.count)
    },
    Sub(){
     
      if(this.count<=0){
        this.options.push(&#39;当前数值不能变化了&#39;+this.count)
      }else{
        this.count=Number(this.count)-1
       this.options.pop()
      }
       
    },
    show(data){
      console.log(data)
      this.data=data    },
    restart(){
      this.count=0
      this.options=[]
    }
  }}</script><style>#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;}button{
  margin: 20px;}ul {
  list-style-type: none;
  padding: 0;}</style>

Effect:

(Learning video sharing: vuejs introductory tutorial, Basic Programming Video)

The above is the detailed content of An article briefly analyzing the problem of value transfer between parent and child components in Vue. For more information, please follow other related articles on the PHP Chinese website!