[JavaScript知识库]vue 组件传值

vue组件间传值

1.父子组件给儿子组件传值

1.父亲组件传值给儿子组件 通过props属性进行传递。（子组件中设置props:[“count”]，然后父亲在调用子组件的标签中添加count:“data的变量”）代码如下

//儿子组件 
Children.vue
<script>
import Grandson from './Grandson'
export default {
    props:['count']
}
</script>

父亲组件
<Children :count="count" @sayLove="getLove"></Children>

2.儿子组件给父亲组件 传值通过的是 $emit方法，第一个参数是自定义事件的名字，第二个参数是传值过来的值，如果传值过来的值很多，我们可以使用对象的方法，把他们都写在第二个参数中.

儿子组件.vue
<button @click="sayLove">表达爱意</button>
<script>
import Grandson from './Grandson'
export default {
    methods:{
        sayLove(){
            this.$emit('sayLove','I love you father') //触发了一个sayLove的组件
        }
    }
}
</script>

父亲组件.vue
<Children :count="count" @sayLove="getLove"></Children>  //定义自定义触发事件的处理函数

<script>
import Children from "./Children.vue";
export default {
  components: {
    Children,
    Brother
  },
  methods:{
    getLove(e){  //参数e对应的是儿子组件$emit的第二个参数
      console.log(e)
      this.mylove = e
    }
  }
};
</script>

3.兄弟组件的传值，在vue原型上定义一个新的实例， 然后采用$emit和$on这两个方法进行获取传递过来的值。

main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App),
}).$mount('#app')


儿子组件.vue
<button @click="sayLove">表达爱意</button>
<script>
export default {
    methods:{
        sayLove(){
            this.$bus.$emit('sayLoveToBro','I love you brother')  //同样触发一个自定义事件
        }
    }
}
  
兄弟组件.vue
<script>
export default {
    created(){
        this.$bus.$on('sayLoveToBro',this.getlove)  //在生命周期中调用对自定义事件进行监听，而过监听到自定义事件触发，则触发getlove函数
    },                                              //建议在该组件摧毁的时候，采用$off方法取消时事件监听，防止内存泄露 
    methods:{
        getlove(e){   //参数e获取到了兄弟组件传过来的值
            console.log('兄弟组件',e)
        }
    }
}
</script>
</script>

4.vuex

5.组件给后代组件传值，privide和inject爷爷组件.vue

<script>
export default {
  provide(){
    return{
      father:this  //给后代接收
    }
  }
  data(){
    return{
      count:1,
      mylove:""
    }
  }
};
</script>


孙子组件.vue
<script>
export default {
    inject:['father'],
    data(){
        return{
            count:this.father.count  //this.father其实就是对应了爷爷组件的option
        }
    }
}
</script>