vue组件传参

组件传参1，父组件如子组件传参1.1父组件通过v-bind/:传参给子组件注意：参数名需要使用-而不是camelCase父组件:data(){return{msg:[1,2,3]};}1.2子组件通过props方法接受参数。props中可以通过定义default来设置可接受的收据类型，如果不满足报错子组件：props:['msgVal']props:{msgVal:Array//这里可以指定传入的类型，如果type是错了，会warn}||props:{msgVal:{type:Array,//指定传入的类型//type也可以是自定义构造函数，使用instanceof检测。default:[0,0,0]//这里可以指定默认值}}{{msgVal}}注意：父子传递参数，数据是异步请求，一个数据渲染时可能会报错：异步请求期间，数据还没有拿到，但此时可能已经渲染到节点。解决方法：（1）可以在父组件需要传递数据的节点上加上v-if。默认为假。异步请求获取到数据后为true(2)在vue中，可以使用this.$nextTick(()=>{})解决异步操作2.子组件触发父组件方法，传递参数2.1子组件通过$emit触发父组件方法父组件通过v-on:方法名定义方法子组件triggersmethodvia$emit('methodname')Enlargetext2.2子组件调用父组件的方法，通过参数。子组件通过$emit触发该方法，第二个参数是需要传递给父组件的参数放大文字父组件通过$event访问子组件抛出的参数methods:{onEnlargeText:function(enlargeAmount){this.postFontSize+=enlargeAmount}}3.子组件传递参数给子组件没有子组件传递参数的方法到vue中的子组件。建议将需要传递参数的子组件合并为一个大组件。如果一定要子组件给子组件传递参数有两种方式（1）有一个父组件可以通过一个一个子组件传参数给父组件，再传给子组件（2）无父组件通过eventBus或vuex（小页面少的项目用eventBus，大页面多的项目用vuex）3.1通过eventBus（即通过v-on监听，$emit触发）3.1.1定义一个新的vue实例，专门用来传输数据，export`eventBus.jsimportVuefrom'vue'exportdefaultnewVue()`3.1.2定义方法名和传输内容，点击Event或者hook函数触发eventBus.emit事件componentA.vue3.1.3接受传过来的数据注意：eventBus是一个新的vue实例,区分了这个componentB.vue代表的两个实例3.2vuex通过value创建Vuex.StoreSave实例到变量store，最后使用exportdefaulttoexportstorestore->index.jsimportVuefrom'vue'//introducevueimportVuexfrom'vuex'//introducevuexVue.use(Vuex)//useVuexconststore=newVuex。store({state:{count:1},getters:{getStateCount:function(state){//state就是上面的状态returnstate.count+1}},mutations:{add(state){state.count=state.count+1},减少（状态）{state.count=state.count-1}},actions:{//注册动作，类似于methodsaddFun(context){//接受一个与store实例具有相同方法的context对象context.commit('add'')},reductionFun(context,n){//接受一个与store实例具有相同方法的上下文对象context.commit('reduction',n)}}})exportdefaultstore//exportstoreinmain.在js文件中引入文件，在文件中添加importstorefrom'./store，然后在vue实例中全局导入store对象：importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementUIfrom'element-ui'Vue.config.productionTip=falsevarecharts=require('echarts')Vue.prototype.$echarts=echartsVue.use(router)Vue.use(ElementUI,{size:'mini'})newVue({router,store,render:h=>h(App)}).$mount('#app')State：vuex中的数据源，我们需要保存的数据就存储在这里，我们定义的数据可以通过页面上的this.$store.state获取；HelloWorld.vueGetters：getter相当于vue中的computed属性，getter的返回值会根据它的依赖关系缓存起来，只有当它的依赖值发生变化时才会重新计算，这里我们可以获取到通过定义vuex的Getter。Getters可用于监视和更改状态中的值，并返回计算结果。这里我们修改HelloWorld.vue文件如下：Mutations：我们拿到了页面上的数据，但是如果我们需要修改count值怎么办？如果你需要修改store中的值，唯一的方法就是提交一个mutation来修改它。现在我们在HelloWorld.vue文件中添加两个按钮，一个加1，一个减1；这里我们点击按钮调用add（执行加法的方法）和reduction（执行减法的方法），然后在mutations中直接提交方法修改值：Actions：但是官方不建议我们直接通过这种方式修改store中的值，而是让我们提交一个action，在actions中提交mutation，然后修改state值。接下来我们修改index.js文件，首先定义actions提交mutation的函数：