vue组件

最新推荐文章于 2022-07-16 21:27:06 发布

漫步的猪

最新推荐文章于 2022-07-16 21:27:06 发布

阅读量159

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/manbudezhu/article/details/82218851

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

全局组件

<!-- 全局组件定义 -->
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>
			<!-- v-bind:content="item" 组件传值 -->
			<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>