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的传值的主要内容,如果未能解决你的问题,请参考以下文章