有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue2 插槽子组件向父组件传值使用方式

vue cat 2个月前 (07-24) 135次浏览 已收录 3个评论 扫描二维码

1.slot插槽作用域:带参数的插槽(可进行子组件向父组件传值)

父组件中:
    在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写

子组件中:
在组件内部用slot进行传值,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接收到,接收到的为一个对象

父组件app.vue

<template>
  <div id="app">
    <son-com>
      <!-- 必须用template标签包裹,val为自定义的属性值,接收到的是一个对象 -->
      <template scope="val">
        <!--msg为子组件的自定义属性  -->
        <div>{{val.msg}}</div>

        <!--将son-com组件当标签使用,必须都写在template中,否则,不会显示 -->
        <div class="con">
          这是我用slot插槽显示的值
        </div>

      </template>

    </son-com>
  </div>
</template>

<script>
import son from "../components/son";
export default {
  components: {
    "son-com": son
  },
  data () {
    return {
    }
  }
}
</script>

<style>
</style>

子组件son.vue

<template>
  <div>
    <!-- 自定义属性进行传值 -->
    <slot :msg="message"></slot>
    <div id="son">{{message2}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: "我是son向app.vue传递的值",
      message2: "哈哈哈哈哈哈哈啊哈"
    }
  }
}
</script>

<style scoped>
#son {
   300px;
  height: 50px;
  background: lightpink;
}
</style>
app.vue(父组件接收值)
<template>
    <div id="app">
        <one-com>
            <template     scope="val">    //val接收到的值为一个对象,
                <li>{{val.msg}}</li>
            </template>
        </one-com>
    </div>
</template>

one.vue(子组件传值)
<template>
    <slot :msg= "message"></slot>//传值(自定义属性)

    export default(){

        data(){
            return{
                message:"我是要传递的内容"
            }
        }
    }

</template>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. Id like to thank you for the efforts you have put in penning this blog. Im hoping to view the same high-grade content by you in the future as well. In truth, your creative writing abilities has encouraged me to get my very own site now ;)
    israelnightclub.com2022-08-17 11:41 回复 Windows 8.1 | Firefox浏览器 31.0
  2. Good write-up. I absolutely love this site. Stick with it!
    israel-lady.co.il2022-08-30 01:21 回复 Windows 8.1 | Chrome 47.0.2526.111
  3. Itís hard to find knowledgeable people about this topic, however, you sound like you know what youíre talking about! Thanks
    דירות דיסקרטיות במרכז2022-09-05 03:55 回复 Windows 7 | Chrome 45.0.2454.101