vue组件

左手的ㄟ右手 2022-05-13 23:23 368阅读 0赞

## 全局组件 ##

Vue.component('todo-list',{
        template:"<li>{
       {content}}</li>"
    })
        
    
    <todo-list></todo-list>

## 局部组件 ##

<div id="app">
    		<todolist ></todolist>
    	</div>
    	<script type="text/javascript">
    		
    		var todolite={
    			template:"<div>hello</div>"
    		}
    		var app=new Vue({
    			el:"#app",
    			// 引入局部组件
    			components:{
    				'todolist':todolite
    			}
    		});
    	</script>

## 组件传值和接收 ##

<div id="app">
    		<ul>
    			
    			<todo-list v-for="item in list" v-bind:content="item"></todo-list>
    		</ul>
    	</div>
    	<script type="text/javascript">
    		
    		Vue.component('todo-list',{
    			// 组件接收数据
    			props:['content'],
    			template:"<li>{
       {content}}</li>"
    		})
        </script>

## 父组件和子组件传递数据 ##

//父子组件交互案例
    
    <body>
        <div id="app">
            <input type="text" v-model="msg">
            <button v-on:click="handle">提交</button>
            <ul>
               //父组件给子组件传递值用v-bind:
               <todo-list v-for="(item,index) in content" v-bind:item="item" v-bind:index="index" v-on:delete="delHandle"></todo-list>
            </ul>
        </div>
    </body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
        <script>
            
            // 局部注册
            var todo={
                props:['item','index'],
                template:'<li v-on:click="del">{
       {item}}</li>',
                methods: {
                    del:function (){
                        // 触发当前实例上的事件。附加参数都会传给监听器回调
                        //子组件向父组件传递
                        this.$emit('delete',this.index);
                    }
                }
            }
    
            var app=new Vue({
                el:"#app",
                data:{
                    content:[],
                    msg:""
                },
                methods: {
                    handle:function(event){
                        this.content.push(this.msg);
                        this.msg="";
                    },
                    delHandle:function(index){
                        this.content.splice(index);
                    }
                },
                components: {
                    'todoList':todo
                }
            })
        </script>
    </html>