Vue入门二：组件与实例

vue入门学习笔记，vue.js下载

目录：

组件
组件与实例的关系
父子组件通信：发布订阅模式

组件

组件指页面中的一部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue Learning</title>
    <script src="./vue.js"></script
  </head>
  <body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of itemValues" 
                        :key="index" 
                        :content="item"> <!-- 定义属性content来传递值-->        
            </todo-item>
        </ul>
    </div>
    
    <script>
        <!-- 全局组件 -->
        Vue.component("todo-item",{
            props:["content"],//子组件中定义props来接收父组件传递来的参数，然后才能在模板中使用
            template:"<li>{{content}}</li>"
        })
        <!-- 局部组件 使用前需要在Vue实例中使用components声明 -->
        //var TodoItem={
        //    template:"<li>item</li>"
        //}
        
        new Vue({
            el:"#app",
            //components:{
            //    "todo-item":TodoItem
            //},
            data:{
                inputValue:"",
                itemValues:[]
            },
            methods:{
                handleClick:function(){
                    this.itemValues.push(this.inputValue)
                    this.inputValue=""
                }
            }
        })
    </script>
  </body>
</html>

组件与实例的关系

每一个组件也是一个vue的实例，实例拥有的属性和方法组件也有。父组件不定义模板是因为它把子组件当做模板。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue Learning</title>
    <script src="./vue.js"></script
  </head>
  <body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of itemValues" 
                        :key="index" 
                        :content="item">     
            </todo-item>
        </ul>
    </div>
    
    <script>
        Vue.component("todo-item",{
            props:["content"],
            template:"<li @click='handleClick'>{{content}}</li>",//子组件也拥有属性
            methods:{//子组件也拥有方法
                handleClick:function(){
                    alert("123")
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                inputValue:"",
                itemValues:[]
            },
            methods:{
                handleSubmit:function(){
                    this.itemValues.push(this.inputValue)
                    this.inputValue=""
                }
            }
        })
    </script>
  </body>
</html>

实现todolist的删除功能

子组件与父组件通信才能实现子组件对父组件数据的操作，通过发布订阅来完成。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue Learning</title>
    <script src="./vue.js"></script
  </head>
  <body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of itemValues" 
                        :key="index" 
                        :content="item"
                        :index="index"
                        @delete="handleDelete"><!--2 父组件订阅了事件delete-->     
            </todo-item>
        </ul>
    </div>
    
    <script>
        Vue.component("todo-item",{
            props:["content","index"],
            template:"<li @click='handleClick'>{{content}}</li>",
            methods:{
                handleClick:function(){
                    this.$emit('delete',this.index)<!--1 子组件发布一个事件delete--> 
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                inputValue:"",
                itemValues:[]
            },
            methods:{
                handleSubmit:function(){
                    this.itemValues.push(this.inputValue)
                    this.inputValue=""
                },
                handleDelete:function(index){<!--3 父组件处理handleDelete-->
                    this.itemValues.splice(index,1)
                }
            }
        })
    </script>
  </body>
</html>

Vue入门二：组件与实例

组件

组件与实例的关系

实现todolist的删除功能