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

一、组件嵌套

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