v-slot vue2.6新增指令使用指南

baicheng1855

于 2019-08-22 16:36:00 发布

阅读量144

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/smzd/p/11395166.html

版权

本文展示了在Vue.js中如何使用子组件与父组件之间的数据传递，通过实例演示了如何在子组件中定义数据并通过slot传递给父组件，父组件再通过v-slot接收并显示这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件
<template>
  <div class="wrapper">
    <slot name="demo"  :msg="msg" text="this is a slot demo , ">this is demo slot.</slot>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        msg: 'nmb'
      }
    },
    watch: {},
    computed: {},
    methods: {},
    created() {},
    mounted() {}
  }
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>

父组件
   <father>
          <template v-slot:demo="scope">
            sb
            <p>{{ scope.text }}{{ scope.msg }}</p>
          </template>
        </father>

转载于:https://www.cnblogs.com/smzd/p/11395166.html