vue父组件、子组件，父子组件交互

Vue父组件调用子组件事件，父子组件交互

vue2

vue父组件向子组件传递数据 or 调用事件

父组件传递数据到子组件 props

传递：

<child-c :args="args"></child-c>

export default {
  data: {
   return() {
     args: {
		id: 1,
		name: 'achuan',
	 }
   }
  }
}

接收：

props: {
  // 可选，并提供默认值
  title: {
    type: String,
    required: false,
    default: '默认标题'
  },
  // 对象或数组
  areg: {
    type: Object,
    default() {
    	return {}
    }
  },

  // 默认可选，单类型
  index: Number,

  // 添加一些自定义校验
  userName: {
    type: String,
    // 在这里校验用户名必须至少3个字
    validator: v => v.length >= 3
  },

  // 默认可选，但允许多种类型
  uid: [ Number, String ]
}

父组件调用子组件方法：

调用事件

方法1：

<child-c ref="child" @click="onChildFn"></child-c>

export default {
  components: {
    childC: childC
  }
  methods: {
    onChildFn() {
	  this.$refs.child.callMethod()
    },
  },
}

方法2：

父组件：

this.$refs.child.$emit('childFn')

子组件：

export default {
    mounted() {
      this.$nextTick(function () {
        this.$on('childFn', function () {
          // ...
        })
      })
    }，
}

---

子组件调用父组件方法：

子组件：

<li ref="child" @click="onParentFn"></li>

onParentFn() {
  this.$emit('onParentFn')
}

父组件：

<child-c ref="child" @onParentFn="parentFn"></child-c>

parentFn() {
  // ...  
}

兄弟组件通信

bus

---

vue3

父组件获取子组件数据：

获取子组件数据

<UploadImg ref="uploadRedList"></UploadImg>

const uploadRedList = ref(null) // 通过 ref 绑定子组件
let mediaListTemp = uploadRedList.value.mediaList
let acceptTemp = uploadRedList.value.accept // images/video

return {
  uploadRedList,
}

父组件传递数据到子组件

传递：

<child-c :args="args"></child-c>

export default {
  data: {
   return() {
     args: {
		id: 1,
		name: 'achuan',
	 }
   }
  }
}

接收：

props: {
  // 可选，并提供默认值
  title: {
    type: String,
    required: false,
    default: '默认标题'
  },
  // 对象或数组
  args: {
    type: Object,
    default() {
    	return {}
    }
  },

  // 默认可选，单类型
  index: Number,

  // 添加一些自定义校验
  userName: {
    type: String,
    // 在这里校验用户名必须至少3个字
    validator: v => v.length >= 3
  },

  // 默认可选，但允许多种类型
  uid: [ Number, String ]
}

setup (props) {
  // 该入参包含了我们定义的所有props
  console.log(props);
  console.log(props);
  let { args } = toRefs(props)
  console.log(args.value)
  // or
  let argsTemp = ref(props.args)
}

父组件调用子组件方法：

调用方法

const uploadRedList = ref(null) // 通过 ref 绑定子组件
uploadRedList.value.childFn()

return {
  uploadRedList,
}

---

子组件调用父组件方法：

子组件：

<li ref="child" @click="onParentFn"></li>

onParentFn() {
  this.$emit('onParentFn')
}

父组件：

<child-c ref="child" @onParentFn="parentFn"></child-c>

parentFn() {
  // ...  
}

兄弟组件通信

安装：

npm install --save mitt

bus.js文件

import mitt from 'mitt';
export default mitt();

发起：

setup () {
  // 调用打招呼事件，传入消息内容
  bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}

接收，销毁：

setup () {
	// 定义一个打招呼的方法
	const sayHi = (msg) => {
	  console.log(msg);
	}
	
	// 启用监听
	bus.on('sayHi', sayHi);
	
	// 在组件卸载之前移除监听
	onBeforeUnmount( () => {
	  bus.off('sayHi', sayHi);
	})
}