vue中组件之间传值的问题（父传子、子传父、兄弟组件）

最新推荐文章于 2022-05-31 17:24:40 发布

翻滚吧-阿西巴

最新推荐文章于 2022-05-31 17:24:40 发布

阅读量199

点赞数

文章标签： vue 组件传值

本文链接：https://blog.csdn.net/qq_40705120/article/details/90611465

版权

1.父传子

<body>
	<div id="app">
		<father></father>
	</div>
	<script>
	//父传子
	Vue.component("father",{
		template:"<div >父元素  --> <son :getFatherValueIs='fatherValue'></son></div>",
		data(){
			return{
				fatherValue:"father"
			}
		},
		components:{
			son:{
				props:["getFatherValueIs"],
				template:"<span>子元素获取的父元素的值为{{getFatherValueIs}}</span>"
			}
		}
	})
	
	var vm=new Vue({
		el:"#app",
		
	})
	</script>
</body>

2.子传父

  <body>
    <div id="app">
      <father></father>
    </div>
    <script>
      
      Vue.component('father', {
        template: `
                        <div>
                          <p>当前父组件获取子组件的值为：{{mySonName}}</p>
                          <son @tellFatherMyname="getMySonName"></son>
                        </div>
        `,
        data () {
          return {
            mySonName: '***'
          }
        },
        methods: {
          // 这个函数中有一个默认参数，该参数就表示上传上来的值
          getMySonName (data) {
            this.mySonName = data
          }
        },
        components: {
          son: {
            data () {
              return {
                myName: '小星星'
              }
            },
            template: '<button @click="emitMyname">点击就传值给阀组件我的值{{myName}}</button>',
            methods: {
              emitMyname () {
                // 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
                // 触发this.$emit()方法
                // 参数一 是一个自定义的事件名称
                // 参数二 就是需要发送给父组件的数据
                // 发布-订阅者模式
                // 子组件就是发布者
                // 发布者需要发布一个消息 消息携带数据
                this.$emit('tellFatherMyname', this.myName)
              }
            }
          }
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
  </body>

3.兄弟组件之间的传值

 <body>
    <div id="app">
      <father></father>
    </div>
    <script>
      // eventbus 事件总线 
      // eventbus 也是用到的发布-订阅者模式
      // 使用一个公共的vue实例作为中介 
      // 这个中介只负责数据的传输 不会挂载新的数据
      // 需要传递数据的组件调用bus.$emit('消息名称','需要发送的数据')
      // 需要接收数据的组件调用bus.$on('事件名称','事件处理函数')   事件名称 和 消息名称 同名
      // 创建一个空的vue实例，作为事件总线
      var eventbus = new Vue()

      Vue.component('father', {
        template:`
                    <div>
                      <son></son>
                      <daughter></daughter>
                    </div>
        `,
        components: {
          son: {
            data () {
              return {
                mySisterName: '???'
              }
            },
            template: '<span>我妹妹告诉我她叫{{mySisterName}}</span>',
            mounted () {
              // 通过eventbus的$on()方法去监听兄弟节点发射过来的事件
              // $on有两个参数，一个是事件名称，一个是函数，该函数的默认值就是传递过来的数据
              eventbus.$on('tellBroMyName', data => {
                this.mySisterName = data
              })
            }
          },
          daughter: {
            data () {
              return {
                myName: '兰兰'
              }
            },
            template: '<button @click="emitMyName">点击就告诉哥哥我叫{{myName}}</button>',
            methods: {
              emitMyName() {
                // 通过事件总线发射一个事件名称和需要传递的数据
                eventbus.$emit('tellBroMyName', this.myName)
              }
            }
          }
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
  </body>