时间：2022-04-11

1、props（父 => 子）用法

在父组件中，引入子组件的标签内绑定；

// 父组件：
<template>
  <div>
 	 // 1、在子组件标签内冒号绑定 
 	 // bind_data 这个名称是传到 自组件 后数据（变量）的名称
 	 // fater_data 是父组件中变量名称
    <children :bind_data:"fater_data"></children>
  </div>
</template>

// 子组件：
<template>
  <div>
  	// 2、展示父组件传过来的数据，这里可以写你自己要处理的形式，我这里直接放上来
 	 {{bind_data}}
  </div>
</template>
<script>
// 1、导入子组件
import children from "@/components/children";
export default {
  data() {
    return {
    };
  },
  // 1、引入父组件的数据
  props: {
	bind_data: {
      likes: "object",
      type: Object,
      required: true,
    },
  },
  methods: {
  }
</script>

父组件（props例子）

// 父组件：
<template>
  <div>
 	 // 2、引用子组件
    <children :bind_data:"fater_data"></children>
  </div>
</template>
<script>
// 1、导入子组件
import children from "@/components/children";
export default {
  components: {
    // 3、注册子组件 children
    children
  },
  data() {
    return {
      fater_data: {name:'xxx', age:'99'} // 看你自己实际数据，这里瞎编的
    };
  },
  methods: {
  }
</script>

子组件（props例子）

// 子组件：
<template>
  <div>
  	// 2、展示父组件传过来的数据，这里可以写你自己要处理的形式，我这里直接放上来
 	 {{bind_data}}
  </div>
</template>
<script>
// 1、导入子组件
import children from "@/components/children";
export default {
  data() {
    return {
    };
  },
  // 1、引入父组件的数据
  props: {
	bind_data: {
      likes: "object",
      type: Object,
      required: true,
    },
  },
  methods: {
  }
</script>

2、$emit （实现方法传值）

函数 写在父组件 时

父组件（$emit例子）

// 父组件：
<template>
  <div>
 	 // 1、在引入子组件的标签 写入函数
 	 // delete-btn	函数在 子组件中的名称
 	 // faterDelete	函数在 父组件中实际名称
    <children :bind_data:"fater_data" @delete-btn:"faterDelete"></children>
  </div>
</template>
<script>
import children from "@/components/children";
export default {
  components: {
    // 3、注册子组件 children
    children
  },
  data() {
    return {
      fater_data: {name:'xxx', age:'99'} // 看你自己实际数据，这里瞎编的
    };
  },
  methods: {
  	// 2、写在父组件中的函数
  	faterDelete(val){
		// 删除操作
	}
  }
</script>

子组件（$emit例子）

// 子组件：
<template>
  <div>
  	// 1、子组件中用 emit 方法
 	 <button @click="$emit('delete-btn', bind_data)"></button>
  </div>
</template>
<script>
// 1、导入子组件
import children from "@/components/children";
export default {
  data() {
    return {
    };
  },
  props: {
	bind_data: {
      likes: "object",
      type: Object,
      required: true,
    },
  },
  // 2、这里类似 声明函数名称
  emits: [
  	'delet-btn',
  ]
};
</script>