vue用公共组件页面传值_Vue—组件传值及vuex的使用

一、父子组件之间的传值

1.父组件向子组件传值：

子组件在props中创建一个属性，用以接收父组件传来的值

父组件中注册子组件

在子组件标签中添加子组件props中创建的属性

把需要传给子组件的值赋给该属性

在子组件中创建props，然后创建一个名为 ‘img-src’ 的数据名

//子组件BigImg.vue

props: ['img-src'],

methods: {

}

}

在父组件中注册子组件，并在template中加入子组件标签，标签中添加img-src属性并赋值

name:'Home',

components: {

vHead,BigImg

},

data() {return{showImg:false,

imgSrc:''}

}

2.子组件向父组件传值

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在子组件中创建一个按钮，给按钮绑定一个点击事件

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

//发送事件

this.$emit('clickit')

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

clickImg(e) {this.showImg = true;//获取当前图片地址

console.log(e);this.imgSrc =e.currentTarget.src;

}

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

二、通过路由带参数传值

两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) //跳转到B

在B组件中获取A组件传递过来的参数、

this.$route.query.orderId

三、安装、使用 vuex

安装vuex

npm install vuex --save

1.在src目录下新建store文件夹并在该文件夹下新建index.js文件。 在 store/index.js写入：

import Vue from 'vue'import Vuex from'vuex'Vue.use(Vuex)

const store= newVuex.Store({

strict:true, //开启严格模式 确保state 中的数据只能 mutations 修改

state:{

count:0}