vue 父子传值

父组件向子组件传递数据 props
父组件和子组件的构图：
上代码：

// 父组件
<template>
  <div>
    <div>     
      <!--3、引用 子组件-->    <!--4、传值，使用动态自定义属性 比如 :abc="list" -->
      <mesList :abc="list"></mesList>   
    </div>
  </div>
</template>

<script>
import mesList from "./meslist"  //1、导入 子组件
export default {
  name: "mesboard",
  components:{mesList},      //2、注册 子组件
  data() {
    return {
		list:[
          {name:"张三",desc:"您好"},
          {name:"李四",desc:"您好"}
        ]
    };
  },
};
</script>

总结：1、自定义一个属性名，值就写你要传给子组件的数据

// 子组件
<template>
	<div>
		<ul>
      <!--2、使用 props中 的 数据。-->
      <li v-for="(item, index) in abc" :key="index">{{ item.name }}</li>
		</ul>
  </div>
</template>

<script>
export default {
    props:["abc"],  //1、获取  父组件传过来的 值
}
</script>

总结：1、用props:[""]  来存父组件传进来的数据  （是填写自定义的键）
     2、再把props  里的数据放在你要用的地方

子组件向父组件传递数据 this.$emit
父组件和子组件的构图：

上代码：

// 父组件
<template>
  <div>
    <!--====1、@clickReback 是 一个自定义的 事件，将来子组件 要调用 =========-->
    <!--====注意：aaa 表示 本父组件的 具体要执行方法。 ======================-->
    <mesList @clickReback="aaa"></mesList>   
  </div>
</template>

<script>
import mesList from "./meslist"  
export default {
  methods: {
     // 2、子组件 可能 会来调用这个方法。
     // 注意 ，如果子组件 传参过来了，就要接收,像这样：aaa(arg){....}
    aaa(str){
        console.log(str) //今天你真美
    }   
  },
};
</script>

总结：1、自定义一个点击事件，给子组件调用
     2、在components  中写上你自定义的方法

// 子组件
<template>
	<div>
    <!--这里 ，需要去 调用父组件的 方法--->
    <button @click="reminitHandle">回复</button>  
	</div>
</template>

<script>
export default {
  methods:{
    reminitHandle(){
       this.$emit("clickReback","今天你真美");    // 1、子组件 调用 父组件 的 方法
    }
  }
}
</script>

总结：
1、写一个点击事件，发射给父组件
2、并在components 中 写上刚刚创建的点击事件方法  this.$emit("")  
3、this.$emit("")  里面第一个值，写父组件自定义的属性 ；第二个值，写你要传给父组件的数据