【Vue】4.组件

最新推荐文章于 2024-01-06 18:42:42 发布

待我学业归来。

最新推荐文章于 2024-01-06 18:42:42 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44859586/article/details/111270348

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.demo

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js  官方:https://cn-.vuejs.org/v2/guide/installation.html-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

</head>
<body>
                                <!--自己创建一个li标签-->
  <div id="app">
        <ul>
          <!-- 有点类似自定义标签 -->
          <my-component-li></my-component-li>
        </ul>
      </div>
  <script>
    // 先注册组件
    Vue.component('my-component-li', {
        template: '<li>Hello li</li>'
    });
    // 再实例化 Vue
    var vm = new Vue({
        el: '#app'
    });
</script>

</body>
</html>

2.使用 props 属性传递参数

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js  官方:https://cn-.vuejs.org/v2/guide/installation.html-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

</head>
<body>
<div id="app">
        <ul>
        <!--v-for="item in items" ：遍历  Vue 实例中定义的名为  items 的数组，并创建同等数量的组件；-->
        <!--v-bind:item="item" ：将遍历的  item 项绑定到组件中  props 定义的名为  item 属性上；
            = 号左边的 item 为 props 定义的属性名，右边的为  item in items 中遍历的 item 项的值；-->
          <my-component-li v-for="item in items" v-bind:item="item">
          </my-component-li>
        </ul>
</div>
  <script>
    // 先注册组件
    Vue.component('my-component-li', {
        props: ['item'],
        template: '<li>Hello {{item}}</li>'
    });
    // 再实例化 Vue
    var vm = new Vue({
        el: '#app',
        data: {
            items: ["张三", "李四", "王五"]
        }
    });
</script>
</body>
</html>