Vue中的$children与$parent讲解

$children与$parent

直接演示代码

父组件：

子组件小明：和子组件小红代码差不多

效果：

需求：

点击找小明借钱100的时候,BABA有存储:1000+100

儿子小明:有存款:30000-100

点击找小红借钱150的时候,BABA有存储:1000+150

女儿小红:有存款:20000-150

点击找所有孩子借钱200的时候,BABA有存储:1000+400

儿子小明:有存款:30000-200

女儿小红:有存款:20000-200

利用$refs解决

ref:可以获取到真实DOM节点，可以获取相应组件的实例VC
ref也算在一种通信手段:在父组件中可以获取子组件(属性|方法)

BABA有存储:1000+100

儿子小明:有存款:30000-100

BABA有存储:1000+150

女儿小红:有存款:20000-150

父组件：

找小明借钱100


methods: {
    //找儿子借钱
    JieQianFromXM(money) {
      //父组件的数据累加100
      this.money += money;
      this.$refs.xm.money -= money;
    },
	//找女儿借钱
	 JieQianFromXH(money) {
      //父组件的数据累加150
      this.money += money;
      this.$refs.xh.money -= money;
    },
  },

打印组件标签ref打了标识。

$children解决

点击找所有孩子借钱200的时候,BABA有存储:1000+400

当然这个需求也可以和上面的一样用$ref解决，这里就不使用了。

这里使用children解决

父组件：

找所有孩子借钱200


JieQianAll(money){
      this.money += 2*money;
	  //组件实例自身拥有一个属性$children,可以获取到当前组件中，全部子组件
      this.$children.forEach(item=>item.money-=money);
      //不建议用数组下标获取子组件：因为没办法确定到底是那个子组件
      // this.$children[0].money -=money;
    },

打印**$children**

总结:
ref可以获取到某一个组件,子组件
$children组件实例的属性,可以获取到当前组件的全部子组件[子组件多的情况是数组形式的]

$parent

$parent组件实例的属性,可以获取到当前子组件的父组件,进而可以操作父组件的数据与方法

点击BABA钱:50

BABA有存储:1000+50

儿子小明:有存款:30000-50

在子组件小明中：

$children与$parent就是这样使用的啦！！！