Vue插槽slot的使用

最新推荐文章于 2024-09-21 11:34:18 发布

鬼鬼骑士

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量54

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39123467/article/details/130963208

版权

文章展示了如何在Vue.js中创建自定义组件`my-button`，并使用数据绑定显示不同内容。第一个案例中，组件内部的`slot`用于展示`value`数据，显示‘登录’；第二个案例则没有传递内容给`slot`，默认显示‘注册’。

摘要由CSDN通过智能技术生成

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
    <my-button>{{value}}</my-button>

</div>
<script type="text/javascript">
  Vue.component('my-button', {
    template: '<span> \
		<slot>注册</slot> \
      </span>'
  })
  let vm = new Vue({
    el: "#example",
    data: {
      value: '登录'
    }
  });
</script>

</body>
</html>

显示效果

在这里插入图片描述

案例代码2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="example">
    <my-button></my-button>

</div>
<script type="text/javascript">
  Vue.component('my-button', {
    template: '<span> \
		<slot>注册</slot> \
      </span>'
  })
  let vm = new Vue({
    el: "#example",
    data: {
      value: '登录'
    }
  });
</script>

</body>
</html>