vue组件通信

标题组件传递值(父传子) 子通过props来获取

/**
 * vue2
 * 父<cjh :message="msg"></cjh>
 *
 * 子 props: {
 * message: {
 * type: String,
 * default: "你是狗",require: true,
 * },
 *
 * 
 * vue3
 *
 * setup(props,context)
 * props获取属性
 * context.emit 向父传值
 */

组件传递值(子传父) 子通过$emit来传递 父通过value来获取数据

/**
 * 子  this.$emit("SayCmx", "跟我说hello");
 *
 *
 *
 *
 *  父 <cjh @SayCmx="SayCmxHello"></cjh>
 * SayCmxHello(value) {},
 *
 */

//父组件调用子组件方法和数据 ref绑定id    this.$refs.id.属性
/**
 *  <cjh :message="msg" ref="cjh"></cjh>
 *
 *
 *
 *this.$refs.cjh.name
 *
 *
 *
 */

子组件访问子组件的数据 this.$parentthis.$root

/**
 *
 * this.$parent   访问父组件
 * this.$root     访问根组件
 */

//子孙组件访问传递  父亲provide   儿子inject
/**
 *provide: {tmh:'探明黄傻逼' },
 * 
 * provide(){   //传递动态值
 *   return {
 *       tmh:"探明黄"
 *   }
 * },
 * 
 * inject: ["tmh"],
 *   
 * 
 */