从新总结下vue2.0的传值吧

1 props传值 father.vue

<template>
  <div class="about">
    <h1>props</h1>
     <Test :title='title' name='测试' @test='testEvent'/>
  </div>
</template>
<script>
import Test from '@/components/test.vue'
export default {
  components:{
    Test
  },
  data(){
    return{
      title:'我是父亲组件的传值'
    }
  },
  methods:{
    testEvent(params){
      console.log(params)
    }
  }
}
</script>

子类 test.vue

<template>
    <div>
        <div>{{title}}</div>
        <button @click='giveFather'>向父亲传值</button>
    </div>
</template>
<script>
export default {
    name:'Test',
    props:{
        title:{
            type:String,
            default:''
        }
    },
    methods:{
        giveFather(){
            this.$emit('test','子类的传值')
        }
    }
}
</script>

v-model 传值的2种方式

子类 test.vue

<template>
  <div class="about">
    <h1>props</h1>
    <h2>{{msg}}</h2>
     <Test v-model="msg" :title='title' name='测试' @test='testEvent'/>
  </div>
</template>
<script>
import Test from '@/components/test.vue'
export default {
  components:{
    Test
  },
  data(){
    return{
      title:'我是父亲组件的传值',
      msg:'你好'
    }
  },
  methods:{
    testEvent(params){
      console.log(params)
    }
  }
}
</script>

子类 test.vue

<template>
    <div>
        <div>{{title}}</div>
        <button @click='giveFather'>向父亲传值</button>
    </div>
</template>
<script>
export default {
    name:'Test',
     model:{//方式2
        prop:'msg',
        event:'testEvent'
    },
    props:{
        title:{
            type:String,
            default:''
        },
         // value:{//这里必须用value 对应方式1
        //     default:''
        // }
    },
    methods:{
        giveFather(){
            // this.$emit('test','子类的传值')
            // this.$emit('input','对于v-modle传来的值进行修改方式1')//对应方式1
             this.$emit('testEvent','对于v-modle传来的值进行修改方式2')//对应方式2   model里面的事件testEvent
        }
    }
}
</script>

$attrs 和 $listeners的传值

test.vue

<template>
    <div>
        <div>{{title}}</div>
        <button @click='giveFather'>向父亲传值</button>
        <sun-zi  v-bind='$attrs' v-on='$listeners'/>
    </div>
</template>
<script>
import sunZi from '@/components/SunZi'
export default {
    components:{
        sunZi,
    },
    inheritAttrs: false, //不想继承所有父组件的数据,同时也不在组件根元素dom上显示
    name:'Test',
    model:{//方式2
        prop:'msg',
        event:'testEvent'
    },
    props:{
        title:{
            type:String,
            default:''
        },
        // value:{//这里必须用value 对应方式1
        //     default:''
        // }
    },
    mounted(){
        console.log(this.$attrs)  //{name: '测试', msg: '你好'}
        console.log(this.$listeners) //{test: ƒ, test2: ƒ, testEvent: ƒ}
    },
    methods:{
        giveFather(){
            // this.$emit('test','子类的传值')
            // this.$emit('input','对于v-modle传来的值进行修改方式1')//对应方式1
             this.$emit('testEvent','对于v-modle传来的值进行修改方式2')//对应方式2   model里面的事件testEvent
        }
    }
}
</script>

sun-zi组件

<template>
    <div>
        孙子
        <h2>{{name}}</h2>
        <h3>{{msg}}</h3>
        <button @click='toYeye()'>孙子组件的按钮</button>
    </div>
</template>
<script>
export default {
    name:'SunZi',
    props:{
        name:{
            type:String,
            default:''
        },
        msg:{
            default:''
        }
    },
    methods:{
        toYeye(){
            // this.$listeners.test('sunzi--->') //方法1
            // this.$listeners.testEvent('sunzi--->') 
            this.$emit('test','sunzi--->')//方法2

        }
    }
}
</script>

provide和inject

test.vue

<template>
  <div class="about">
    <h1>props</h1>
    <h2>{{msg}}</h2>
     <Test v-model="msg" :title='title' name='测试' @test='testEvent' @test2='testEvent2'/>
  </div>
</template>
<script>
import Test from '@/components/test.vue'
export default {
  components:{
    Test
  },
  provide(){/////---------------
        return{
            message:this.title,
            event: this.provideMethods,
        }
  },
  data(){
    return{
      title:'我是父亲组件的传值2',
      msg:'你好'
    }
  },
  methods:{
    testEvent(params){
      console.log(params)
      alert(params)
    },
    testEvent2(){

    },
    provideMethods(paramse){
      this.title=paramse
      console.log(paramse)
    }
  }
}
</script>

sun-zi组件

<template>
    <div>
        孙子
        <h2>{{name}}</h2>
        <h3>{{msg}}</h3>
        <button @click='toYeye()'>孙子组件的按钮</button>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
export default {
    name:'SunZi',
    inject: ['message','event'],
    props:{
        name:{
            type:String,
            default:''
        },
        msg:{
            default:''
        }
    },
    mounted(){
        
    },
    methods:{
        toYeye(){

            // this.$listeners.test('sunzi--->') //方法1
            // this.$listeners.testEvent('sunzi--->') 
            // this.$emit('test','sunzi--->')//方法2


            this.event('测试啊')
        }
    }
}
</script>

eventBus

main.js

//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
// window.eventBus = new Vue();

test.vue 页面

<template>
  <div class="about">
    <h1>props</h1>
    <h2>{{msg}}</h2>
     <Test v-model="msg" :title='title' name='测试' @test='testEvent' @test2='testEvent2'/>
     <button @click='sendData()'>eventSend数据</button>
  </div>
</template>
<script>
import Test from '@/components/test.vue'
export default {
  components:{
    Test
  },
  provide(){
        return{
            message:this.title,
            event: this.provideMethods,
        }
  },
  data(){
    return{
      title:'我是父亲组件的传值2',
      msg:'你好'
    }
  },
  methods:{
    testEvent(params){
      console.log(params)
      alert(params)
    },
    testEvent2(){

    },
    provideMethods(paramse){
      this.title=paramse
      console.log(paramse)
    },
    sendData(){ //发送数据
      
      this.$EventBus.$emit('eventBus','从xxxx')  
    }
  }
}
</script>

sun-zi.vue

<template>
    <div>
        孙子
        <h2>{{name}}</h2>
        <h3>{{msg}}</h3>
        <button @click='toYeye()'>孙子组件的按钮</button>
        <h3>{{message}}</h3>
    </div>
</template>
<script>
export default {
    name:'SunZi',
    inheritAttrs: false,
    inject: ['message','event'],
    props:{
        name:{
            type:String,
            default:''
        },
        msg:{
            default:''
        }
    },
    mounted(){ //事件监听
          this.$EventBus.$on("eventBus", (params) => {
              
              console.log(params)
          });
    },
    methods:{
        toYeye(){

            // this.$listeners.test('sunzi--->') //方法1
            // this.$listeners.testEvent('sunzi--->') 
            // this.$emit('test','sunzi--->')//方法2


            this.event('测试啊')
        }
    },
    destroyed(){ //销毁
        this.$EventBus.$off('eventBus');
        //  this.$EventBus.$off();
    }
}
</script>

sync

父组件

  <TestAsync :value.sync='text' />

子组件

<template>
    <div>
        这个不好
        <button @click='test'>测试sync的传值   --------{{value}}</button>
    </div>
</template>
<script>
export default {
    name:'TestAsync',
    props:['value'],
    methods:{
        test(){
            this.$emit('update:value',"子组件的值")
        }
    }
}
</script>