Vue三种常用传值示例(父传子、子传父、非父子)
程序员文章站
2022-03-21 20:36:08
1、父组件向子组件进行传值:
父组件:
父组件:
1、父组件向子组件进行传值:
父组件:
<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputname="name"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
子组件:
<template> <div> 子组件: <span>{{inputname}}</span> </div> </template> <script> export default { // 接受父组件的值 props: { inputname: string, required: true } } </script>
2.子组件向父组件传值
子组件:
<template> <div> 子组件: <span>{{childvalue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childclick"> </div> </template> <script> export default { data () { return { childvalue: '我是子组件的数据' } }, methods: { childclick () { // childbyvalue是在父组件on监听的方法 // 第二个参数this.childvalue是需要传的值 this.$emit('childbyvalue', this.childvalue) } } } </script>
父组件:
<template> <div> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childbyvalue="childbyvalue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childbyvalue: function (childvalue) { // childvalue就是子组件传过来的值 this.name = childvalue } } } </script>
3.非父子组件进行传值。(非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。)
公共bus.js
//bus.js import vue from 'vue' export default new vue()
组件a:
<template> <div> a组件: <span>{{elementvalue}}</span> <input type="button" value="点击触发" @click="elementbyvalue"> </div> </template> <script> // 引入公共的bug,来做为中间传达的工具 import bus from './bus.js' export default { data () { return { elementvalue: 4 } }, methods: { elementbyvalue: function () { bus.$emit('val', this.elementvalue) } } } </script>
组件b:
<template> <div> b组件: <input type="button" value="点击触发" @click="getdata"> <span>{{name}}</span> </div> </template> <script> import bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件来接收参数 bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getdata: function () { this.name++ } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: jQuery eq()