5vue的传值

Posted taozhibin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5vue的传值相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于5vue的传值的主要内容,如果未能解决你的问题,请参考以下文章

请教:php如何实现json的传值

DialogFragment的传值问题

Java的传值机制

界面之间的传值

父子组件间的传值

Vue组件之间的传值方法