vue局部组件和全局组件的TODOlist,vue添加删除表单

系统管理员 2022-01-25 19:17 289阅读 0赞

### 全局组件 ###

##### 1, v-bind:content 将item参数传给子组件 TodoItem,TodoItem接受后在li进行渲染 #####

##### 2, 父子组件: 父组件用v-bind 传给子组件, 子组件需用用props来进行接受, 子组件传给父组件值时, 子组件以$ emit方式传给父组件, 父组件监听$emit,父组件监听过后就能获取子组件的值 #####

##### 3, v-bind:xxx 可以简写成: :xxx #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    </head>
    <body>
    <div id ="app">
        <input type="text" v-model="inputV"/>
        <button @click="handleClick">提交</button>
        <ul>
            <todo-item
                    :content = "item"
                    :index="index"
                    v-for="(item, index) in list"
                    @delete = 'handleItemList'
            >
    
            </todo-item>
        </ul>
    </div>
    <script>
          Vue.component('TodoItem', {
            props: ['content', 'index'],
            template: "<li @click='handleItem'>{
       { content}}</li>",
            methods: {
              handleItem : function () {
                this.$emit('delete', this.index)
              }
            }
          })
    
        var app = new Vue({
          el: '#app',
          data : {
            list: [],
            inputV: ''
          },
          methods:{
            handleClick: () => {
              if ( this.app.inputV ) {
                this.app.list.unshift(this.app.inputV)
                this.app.inputV = ''
              } else {
                alert('请填写内容!')
              }
            },
            handleItemList: function (index) {
              this.list.splice(index, 1)
    
            }
          }
        })
    </script>
    </body>
    </html>

### 局部组件 ###

##### 1, v-bind:content 将item参数传给子组件 TodoItem,TodoItem接受后在li进行渲染 #####

##### 3, v-bind:xxx 可以简写成: :xxx #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    </head>
    <body>
    <div id ="app">
        <input type="text" v-model="inputV"/>
        <button @click="handleClick">提交</button>
        <ul>
            <todo-item
                    :content = "item"
                    :index="index"
                    v-for="(item, index) in list"
                    @delete = 'handleItemList'
            >
    
            </todo-item>
        </ul>
    </div>
    <script>
          var TodoItem = {
            props: ['content', 'index'],
            template: "<li @click='handleItem'>{
       { content}}</li>",
            methods: {
              handleItem : function () {
                this.$emit('delete', this.index)
              }
            }
          }
    
        var app = new Vue({
          el: '#app',
          components:{
            TodoItem: TodoItem,
          },
          data : {
            list: [],
            inputV: ''
          },
          methods:{
            handleClick: () => {
              if ( this.app.inputV ) {
                this.app.list.unshift(this.app.inputV)
                this.app.inputV = ''
              } else {
                alert('请填写内容!')
              }
            },
            handleItemList: function (index) {
              this.list.splice(index, 1)
    
            }
          }
        })
    </script>
    </body>
    </html>