5、vue的传值 （1）

1-父组件向子组件  -父组件向孙子组件传值（属性传值）

 

//父组件
<template>
  <div id='app'>

     <headera v-bind:hea="hea" v-bind:mas="mas" :use="use"></headera>   //v-bind绑定属性
 
  </div>
</template>

<script>
import Headera from './components/Headera'
export default {
  name: 'App',
  data () {
    return {
      mas: '我是父组件zhi（祖先）',
      msga:'app原有的值contenet',
      hea: '我是父亲传给head',
      use: ["tom","lili","jary"],
    }
  },
  components: {
    'headera': Headera,
  }
}

</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;
}
.test{
  color:skyblue;
}
</style>

 

//子组件接收
<template>
    <div>我是headera
         <p>{{hea}}</p>
        <p>{{mas}}</p>
        <p>{{use}}</p>  //正常需要遍历

          <heada v-bind:son="mas"></heada>  //向孙子组将传值

    </div>    
</template>

<script>

  import Heada from './heada'

export default {
  name: 'Headera',
  props: ['hea','mas','use'],  //用props接收

    components: {

      'heada':Heada

    },

}

</script>

<style scoped>
   div{
       background-color:#666;
       height:400px;
   }
</style>

 

//孙子组件
<template>
     <div>孙子原来的：
         <p>接收的{{son}}</p>
     </div>
</template>

<script>
export default {
   name: 'heada',
    props: ['son']
}
</script>

<style scoped>
  div{
      height: 50px;
      color: aqua;
      background: brown;
  }
</style>

 

 

 

 

3.子向父亲传值

//儿子组件

<template>
    <div @click="denglu">我是heade    </div>     //触发这个事件

</template>

<script>

export default {
  name: 'Headera',
  data () {
  },
   methods: {
        denglu () {
            this.$emit('changeMsg',“我是传的值”) 
          } 
     } 
  }
 </script>
 <style scoped> div{ background-color:#666; height:400px; } </style>

 

<template>
  <div id='app'>
     <h1>{{mas}}</h1>

     <headera v-on:changeMsg="clickA"></headera>

  </div>
</template>

<script>
import Headera from './components/Headera'

export default {
  name: 'App',
  data () {
    return {
      mas: '我是父组件zhi',

    }
  },
  components: {
    'headera': Headera,
  },
  methods: {
    clickA (x) {
      this.mas = x
    }
  }
}
</script>