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

忘是亡心i 2022-01-29 23:17 410阅读 0赞

# 一、组件嵌套 #

<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>