Vue学习笔记2-6 全局组件与局部组件、子组件数据传递

最新推荐文章于 2022-09-14 18:17:49 发布

@凌晨三点半

最新推荐文章于 2022-09-14 18:17:49 发布

阅读量506

点赞数

分类专栏： Vue.js 文章标签： Vue Vue子组件绑定 Vue全局组件 Vue局部组件 Vue组件

本文链接：https://blog.csdn.net/soulwyb/article/details/85321665

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

1.组件化：

<body>
  <div id="app">
    <input type="text" v-model="inputvalue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <todo-item v-for="item in List"></todo-item>
    </ul>
  </div>
  <script>

    Vue.component("TodoItem", {
      template: "<li>fefefefe<li>"
    })

  </script>

2.子组件数据传递：

  <div id="app">
    <input type="text" v-model="inputvalue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <todo-item v-bind:content="item"
                 v-for="item in List">
      </todo-item>
    </ul>
  </div>
  <script>

    Vue.component("TodoItem", {
      props: ['content'],
      template: "<li>{{content}}<li>"
    })
  </script>

其中此部分的组件称为全局组件：


    Vue.component("TodoItem", {
      props: ['content'],
      template: "<li>{{content}}<li>"
    })

局部组件写法：

  <div id="app">
    <input type="text" v-model="inputvalue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
      <todo-item v-bind:content="item"
                 v-for="item in List">
      </todo-item>
    </ul>
  </div>
  <script>

    var TodoItem = {
      props: ['content'],
      template: "<li>{{content}}<li>"
    }

    var app = new Vue({
      el: '#app',
      data: {
        List: [],
        inputvalue: ''
      },
      methods: {
        handleBtnClick: function() {
          this.List.push(this.inputvalue)
          this.inputvalue = ''
        }
      },
      components: {
        TodoItem: TodoItem
      }
    })
  </script>

现实的效果：

@凌晨三点半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记2-6 全局组件与局部组件、子组件数据传递

1.组件化：&lt;body&gt; &lt;div id="app"&gt; &lt;input type="text" v-model="inputvalue"&gt; &lt;button v-on:click="handleBtnClick"&gt;提交&lt;/button&gt; &lt;ul&a
复制链接

扫一扫