个人理解:插槽的子传父 区别于使用自定义事件子传父
插槽传值是通过 在标签上定义属性    而自定义事件 发送事件函数及数据是定义在js中
个人觉得 插槽形式适用于预览数,不进行本地保存
而自定事件有 发送$emit 和父组件中自定义的接收函数  此时就便于将接收到的数据保存到父实例中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title </title>

  <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <ycx>
<!-- 插槽可以通过自定义属性,将值传到父组件插槽中,统一会存放在data对象中-->
<!--    该插槽的作用域 为 template下-->
    <template v-slot:title="data">
      <div>
        {{data}}
      </div>
    </template>
  </ycx>
</div>
<script id="temp" type="text/html">
  <div>
    这是子组件的内容
    <!--具名插槽-->
<!--    插槽可以通过自定义属性,将值传送到父组件插槽中使用-->
    <slot name="title" :message="msg" :people="obj"></slot>
  </div>
</script>
<script>
  Vue.component('ycx', {
    template: '#temp',
    data(){
      return{
        msg:'这是gok里的内容',
        obj:{
          name:'张三',
          age:18
        }
      }
    }
  })

  new Vue({
    el: "#app",
    data: {
      msg:"这是父组件里的内容"
    }
  })
</script>
</body>
</html>

 总结：后续补充

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue