Vuejs 父子组件通信
参考链接
全局组件与局部组件
全局注册 Vue.component('my-cpn',myCpn)
局部注册 components
组件参数传递驼峰标识写法
props:{'childM'}
:child-m
父组件传递子组件
props 是单向绑定的 。当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态。
如果prop在父子组件的属性名定义一样，可以直接 :属性
子组件代码
<template>
<div>
<h2>购物车</h2>
<p>id:{{id}}</p>
<p>name:{{name}}</p>
</div>
</template>
<script>
export default {
name: "cart",
// props:{
// id:String,
// name:String
// }
props:['id','name'] //两种形式，第一种可以定义数据类型
}
</script>
父组件代码
1.import 导入子组件
2.components 注册子组件。//可以 重命名。 cart22：cart
3.通过v-bind 动态传递参数给子组件。//data传递参数直接在""中间写参数名，不是的则在"''"单引号中间写
<template>
<div>
<h2>首页</h2>
<h2>子组件</h2>
<cart :id="'a'" :name="'b'"></cart>
</div>
</template>
<script>
import cart from '@/views/backEnd/cart'
export default {
name: "index",
components:{
cart
},
// data(){
// return{
// a:"asd",
// b:"zxc",
// }
// }
};
</script>
子组件传递父组件值
子组件
this.$emit('btnclick', this.message); //childFn 父组件监听事件，需要传递的值，可以多个，用逗号分隔
父组件
@btnclick="fun"
--
fun(val){
console.log(val) //子组件传递过来的值,上面的this.message
}
//参考链接 https://www.jianshu.com/p/af9cb05bfbaf
父子组件双向绑定
首先是子组件props拥有两个属性{"a1","a2"},父组件传递a1,a2的值过来。
在子组件的页面 v-model="a1"
我想在子组件变更a1,a2的值，并且父组件也去更新。相当于变更父组件传递过来的值。
一般的做法是，在子组件定义data,这边定义 da1,da2。通过子组件的监听方式，methods写函数变更父组件的值。然后传递给父组件的监听，父组件再写函数去改变
在子组件的页面 v-model="da1"
子组件函数内容
this.da1="asd"
this.$emit('btnclick', this.da1); //变更父组件的a1值
父组件
@btnclick="fun"
--
fun(val){
this.a1=val //变更a1值
}
第二种做法是通过子组件的 watch。
watch 监听到属性的变化，会自动执行函数。例如上面的
watch:{
da1(newValue,oldValue){ //oldValue 可省略
this.$emit('btnclick', newValue) //父组件的监听事件
}
}
父子组件的访问方式： 父组件操作子组件的属性或者方法，子组件操作父组件的方法
父组件访问子组件： 使用$children 或者 $refs reference(引用)
子组件访问父组件: 使用 $parent
简单案例：假设子组件有个 show方法，打印 123 ,有个属性 name:"a"
父组件
btnClick(){
this.$children[0].show() //打印 123
this.$children[0].name // a
}
如果在父组件中有多个子组件，那么通过this.$children[0]去拿是不确定不方便的，通过ref去拿。
例如 子组件
简单案例：
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn>
----
this.$refs.aaa //就是 ref="aaa" 的这个子组件了。相当于绑定了key
子组件访问父组件的方法,不建议使用，因为耦合度增加了，不方便组件的复用
例如 父组件属性 name="a"
this.$parent.name //a
访问根组件,也很少用到
this.$root
