Vuejs 父子组件通信

参考链接

• https://www.jb51.net/article/143049.htm

全局组件与局部组件

全局注册 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