VUE组件化理解(一)组件之间的传值方法调用

VUE组件化理解(一)

父组件传值给子组件

1.属性props

// parent.vue

// children.vue

props 类型 type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

2.子元素$children

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

// parent.vue
this.$children[0].xx = xx

子组件传值给父组件

是通过方法传递的，也相当于子组件调用父组件方法：

// parent.vue

// children.vue

父子组件方法相互调用：

Vue不提倡用原生的dom操作获取节点，它封装了自己的方法来实现获取dom
做法：
给要获取的dom一个ref属性，起一个名字，通过this.$refs来得到组件里所有有ref属性的dom节点，返回的是一个json

// parent.vue
 < helloworld>
 this.$refs.hw.xx = xx

// parent.vue

// children.vue

父组件调用子组件的方式：

• 通过$ref.子组件ref属性名，给子组件定义一个ref属性
  子组件调用父组件的3种方式：
• 通过$emit
• 通过$parent和$root
• 通过父组件把方法传给子组件

非父子组件之间的方法调用（es6方法）

//B模块
import A from 'A的相对路径’
然后调用方法
A.methods.方法函数名()
会改变this指向

**

非父子组件传值

**

建议使用VUEX中共享仓库
this.id = this.$store.state.(sotre中定义的值);
或者
Bus使用空vue实列做中央数据中线；
定义Bus.js

// Bus.js

import Vue from "vue";
var Bus = new Vue();
export default Bus;
在A中，Bus.$emit('getVm',child);
在B中，
Bus.$on('getVm', function (data) {
	self.percent = data.name;
	console.log(self.percent);
})

bus 好像是1.0废弃dispatch和broadcast之后 出来的 解决方案