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

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

vue 炮渣日记 7个月前 (07-24) 388次浏览 已收录 0个评论 扫描二维码

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)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址