vue组件传值方式介绍
vue组件传值有,父传子,子传父,兄弟传值 在vue中,每一个组件都是一个单独的个体,自己组件内的东西自己改变 1,父传子运用的方法是:自定义属性绑定 父元素通过将自己的数据绑定到自定义属性上,子组件通过 props 接收 HTML代码 <div id="app"> Father /> </div> template ="father"> p>使用单向数据绑定,将父组将的值绑定到子组件身上<!-- 可以自己定义组件属性,一般与属性值一样 --> son :msg='msg' /> template='son'> 子组件接收父组件传递的值:{{msg}} JS代码 // 创建父组件 Vue.component('Father',{ template: '#father'return { msg: 300 } } }) 定义子组件 Vue.component('Son' 此处的 msg 为自定义的属性,而不是父元素中的数据 msg , props: ['msg'],}) 此处 new 出的实例对象要放在定义的组件下边 new Vue({ el: "#app" }) ? 2,子传父:通过自定义事件绑定? ?$emit 子组件发出一个传递数据的动作,父元素接收。 HTML代码 <> Father></> > 此处定义事件名,可以自定义,一般与函数名相同,但是子组件调用时,调用的是前边的函数名,后边的 hide 为父组件中的函数 --> Son @hide='hide'Son="son" 子组件有message,父组件需要但是没有 button @click="give">传递数据button> JS代码 // 定义父组件 Vue.component('Father' { messageFather: 500 } },methods:{ 接收子组件传递过来的东西 hide(val) { this.messageFather += val } } }) { message: 902 通过事件派发,传递数据 give() { this.$emit('hide',this.message) } } }) 3,兄弟组件传值 兄弟组件传值主要是运用的 vue 中的 $emit??
JS代码 ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |