Vue插槽slot的使用

文章目录

  • 案例代码
    • 显示效果
  • 案例代码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>{{value}}</my-button>

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

</body>
</html>

显示效果

Vue插槽slot的使用_第1张图片

案例代码2

Vue插槽slot的使用_第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: ' \
		注册 \
      '
  })
  let vm = new Vue({
    el: "#example",
    data: {
      value: '登录'
    }
  });
</script>

</body>
</html>

显示效果

Vue插槽slot的使用_第3张图片

解释

Vue插槽slot的使用_第4张图片

你可能感兴趣的:(vue.js,前端,javascript)