黑马程序员技术交流社区

标题: 【上海校区】vue2.0的三种常用传值方式，并且如何实现？ [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-6 09:25
标题: 【上海校区】vue2.0的三种常用传值方式，并且如何实现？

一. 父组件向子组件传值

     1. 使用props建立数据通道的渠道

               // 这是父组件 <div id="app">

              // 这是子组件 <child message="hello" ></child>

                                    </div>

     2 . 在子组件中通过props传递过来的数据

              Vue,component('child',{

                       props:['message']

               })

二. 子组件向父组件传值

    1. 子组件中需要一个点击事件触发一个自定义事件

• 
  
  Vue.component('son',{
  
  
• 
  
              methods:{
  
  
• 
  
                  handleClick(){
  
  
• 
  
                  // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
  
  
• 
  
                      this.$emit('toFather',123)
  
  
• 
  
                  }
  
  
• 
  
              },
  
  
• 
  
              template:`
  
  
• 
  
                  <div>
  
  
• 
  
                      <h1>这是子组件</h1>
  
  
• 
  
                      <button @click="handleClick" >
  
  
• 
  
                          发送给父组件
  
  
• 
  
                      </button>
  
  
• 
  
                  </div>
  
  
• 
  
              `
  
  
• 
  
          })
  
  
  

       2. 在父组件中的子标签监听该自定义事件得到传递的值

               

三. 非父子组件传值

有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1 . 创建一个空的vue

• 
  
      // 创建一个空的公共的vue对象
  
  
• 
  
      var bus = new Vue();
  
  
  

• 
  

2 . 在组件1中,定义$emit来发送数据

bus.$emit('test','数据')

• 
  

3 . 在组件2中使用$on来接收传递的数据

• 
  
  bus.$on('test', function(num) {
  
  
• 
  
       this.getData = num;
  
  
• 
  
         //事件的解绑问题
  
  
• 
  
          bus.$off("test")
  
  
• 
  
  })
  
  
  

• 
  

当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值

• 
  
  // 在第一个组件中 setItem 设置值
  
  
• 
  
  localstorage.setItem('test','数据')
  
  
• 
  
  // 在第二个组件中 getItem 获取值
  
  
• 
  
  localStorage.getItem("test");
  
  
  

---

作者: 不二晨    时间: 2018-8-16 17:24
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2