vue----组件传值方式
组件之间传值方式
父组件 子组件 非父子组件 1.父------->儿子（注意：父不能向孙子传递） 2.儿子--------->父 3.非父子传递（兄弟间，叔侄间）
1.父传子
传递方：
当子组件在父组件中当标签使用时，给子组件标签添加一个自定义属性，值为需要传递的值 ：属性名=“值”（值为父组件data中的属性）
即：
<子组件标签 :属性名1="值" ：属性名2："值"></子组件标签>
接收方：
在 子组件内部，通过props接收, 并在子组件页面中进行渲染 {{属性名}}即接收到的值 props接收的有两种方式 1.数组形式的接收props:["属性名1"，"属性名2"] 2.对象形式的接收（可保证接收数据类型的严谨性） export default{ props:{ 属性名1:String, 属性名2:Number } }
子组件中：
//渲染
<template>
<div>
<p>接收到父组件的值为：{{属性名1}}----{{属性名2}}</p>
</div>
</template>
//接收
<script>
exprot default{
props:["属性名1"，"属性名2"]
}
</script>
2.子传父
app.vue
给(在父组件中使用的)子组件定义一个自定义方法，子组件通过调用父组件的方法进行传值
<子组件标签 @自定义事件名="自定义方法"></子组件标签>
<one-com :val="city" :val2="message" @handleData="getval"></one-com>
//父组件接收值
methods:{
getval(val){
// 接收子组件传来的值
this.son = val;
}
}
son.vue
通过this.$emit()触发事件以及事件对应的方法，并传值
，，，自定义的方法不需要加（）
子组件传值：（一般子组件中会通过出发事件传值）
methods:{
handleSend(){
// 触发事件（同时触发事件对应的方法），并向方法传值（子组件中的值）
this.$emit("handleData",this.sonMessage);
}
},
总结：
在父组件中
给子组件标签自定义事件，以及事件对应的方法
在methods中，用该方法进行接收子组件传来的值，并将值放入data对应的属性中
在子组件中（一般要有一个事件来触发$emit()）
通过$emit()出发事件，并向函数传值，传得值就是子组件data中的值
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
非父子传值
1.在main.js中设置公共的对象
Vue.prototype.observe = new Vue()
因为每个组件都是一个对象，如果我们需要对事件进行监听，必须用同一个$on,和$emit，因此在组件内部用属于自己的$on,$emit是无效的，所以，我们建立了一个公共的vue对象
事件为自己定义的，传值方和接收值方的事件必须一致
传值方：(触发事件，并传值)
this.observer.$emit(事件，值)
接收值方：（绑定事件，并接收值）参2为事件对应的函数
this.observer.$on(“事件”,(值)=>{})
必须在created(){}中进行接收，因为在created钩子函数中，可以访问到属性和方法，而我们要将接收到的值放入data的某个属性中，所以，要在created中进行绑定事件，并接收值
created(){
//接收方，绑定事件，接收值val
this.observer.$on("change",(val)=>{
this.other = val;
})
}
用途：
列表页和详情页中的购物车
购物车（不同位置的数量，价格都是对应的）
地理位置
删除修改案例总结
1.
one组件
点击添加
将输入框中的值（对象 ）传到two组件
two组件
接收one组件传来的值（对象），将对象push到数组中，并在页面中渲染
2.
two组件
点击修改（获取当前修改的index）
获取数组中index对应的对象，将对象传给one组件
one组件
接收two组件传来的对象，并修改data中的值
3.
one组件
点击修改
获取当前输入框的值，传给two组件
two组件
接收传来的值，并修改数组中index对应的对象的值
