vue学习三组件嵌套及父子组件传值

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

9 篇文章

订阅专栏

该博客主要介绍了Vue的组件嵌套和父子组件传值。组件嵌套可使用组件名当作标签引入子组件。父子组件传值方面，父向子传值时，object和Array传地址，Boolean、number和String传值；还介绍了子向父传值的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、组件嵌套

<template>
  <div id="app">
    <son/>
  </div>
</template>

<script>
  import Son from  "./components/Son"

export default {
  name: 'App',
  components: {
    "son":Son
  }
}

使用组件的名字当作标签即可引入子组件。

二、父子组件传值

1.父组件向子组件传值

子组件

<template>
  <div class="Son">
    <ul>
      <li v-for="param in params">
          {{param}}
      </li>
    </ul>
  </div>

    
</template>

<script>
    export default {
        name: "Son",
      props:{
        params:{
            type:Array,
            required:true
          }
      },

    }
</script>

<style scoped>

</style>

父组件

<template>
  <div id="app">
    <son v-bind:params="params"/>
  </div>
</template>

<script>
  import Son from  "./components/Son"

export default {
  name: 'App',
  data:function () {
    return{
      params:[1,3,5]
    }
  },
  components: {
    "son":Son
  }
}
</script>

<style>

</style>

注意：当值为object Array时，传递的是地址，为Boolean number String时传递的是值。

2.子组件向父组件传值

子组件

<template>
  <div class="Son" v-on:click="changeValue">
      <h1>{{value}}</h1>
  </div>

    
</template>

<script>
    export default {
        name: "Son",

      props:{
          value:{
            type:String
          }
      },
      methods:{
        changeValue:function () {
          this.$emit("valueChane","value changed")
        }
      }

    }
</script>

<style scoped>

</style>

父组件：

<template>
  <div id="app">
    <son v-on:valueChane="updateValue($event)" v-bind:value="value"/>
  </div>
</template>

<script>
  import Son from  "./components/Son"

export default {
  name: 'App',
  data:function () {
    return{
      value:"1"
    }
  },
  methods:{
    updateValue:function (value) {
      this.value=value
    }
  },
  components: {
    "son":Son
  }
}
</script>

<style>

</style>