vuejs笔记之父/子组件之间传值($emit/props)

责编:menVScode 2017-10-05 15:27 阅读(1343)

子组件所使用到的数据,必须是一个函数,数据用return返回;

<div id="app">
	<component01></component01>
</div>
Vue.component('component01',{
	template:'<h3 @click="doClick">{{name}}</h3>',
	//子组件所使用到的数据,必须是一个函数,数据用return返回;
	data:function() {
		return { //组件需要的数据是放在大括号内
			name:'menvscode'
		}
	},
	methods:{
		doClick:function(){
			alert('子组件');
		}
	},
});
new Vue({
	el:'#app',
	methods:{
		doClick:function(){
			alert('父组件组');
		}
	}
});


父组件向子组件传递数据;

<div id="app">
	<!-- 父组件向子组件传递数据 :自定义名字="要传递的数据" -->
	<component02 :abc='name' :doclick='doclick'></component02>
</div>
Vue.component('component02',{
	template:'<div @click="doclick"> {{abc}} </div>',
	// 用props接受父组件的数据:接受自定义的名字
	props:['abc','doclick'],
	data:function() {
		return {  }
	}
})
new Vue({
	el:'#app',
	data:{
		name:'MVC'
	},
	methods:{
		doclick:function(){
			alert('父组件');
		}
	}
})


子组件向父组件传递数据;

        点击子组件按钮的时候,触发执行doClick事件,其内部执行 $emit() 方法,第一个参数:事件的名称,后面参数是所要传递的数据。

<div id="app">
	<component03 @change='abc'></component03>
</div>
Vue.component('component03',{
	template:'<div> <button @click="doClick">按钮</button> </div>',
	data:function() {
		return {  }
	},
	methods:{
		doClick:function(){
			// 第一个参数:事件的名称,后面参数是所要传递的数据
			this.$emit('change',{'a':123,'b':456,'c':789});//会返回{}
		}
	}
})
new Vue({
	el:'#app',
	methods:{
		abc:function(val){			console.log(val);//{'a':123,'b':456,'c':789}
		}
	}
})

        父组件 向 子组件 传递 用 v-bind  缩写 :  接收方式 props 。

        子组件 向 父组件 传递 用 v-on  缩写 @   接收方式methods 。


完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        *{padding: 0;margin: 0;}
        dl{border: 1px solid #bbb;}
        .title{text-align: center;padding: 8px 0;}
        .content{border-top: 1px solid #bbb;border-bottom: 1px solid #bbb;padding: 8px;}
        .btns{padding: 8px;}
    </style>
</head>
<body>
    <div id="app">
            <wzc-modal 
                :title='title'
                @sure-handle='sureHandle'
                @cancel-hadle='cancelHandle'
            ></wzc-modal>
    </div>
    <script>
        Vue.component('wzc-modal',{
            props:['title'],
            methods:{
                wzcSure(){
                    console.log('点击了确定按钮')
                    this.$emit('sure-handle',{'name':'menvscode.com','age':1})
                },
                wzcCancel(){
                    console.log('点击了取消按钮')
                    this.$emit('cancel-hadle',[1,2,3,4])
                }
            },
            template:`
            <dl>
                <dt class="title">{{title}}</dt>
                <dd class="content">内容暂时</dd>
                <dd class="btns">
                    <button @click="wzcSure">确定</button>
                    <button @click="wzcCancel">取消</button>
                </dd>
            </dl>
            `
        })
        var vm = new Vue({
            el : '#app',
            data: {
                title:'警告'
            },
            methods:{
                sureHandle(val){
                    console.log(val)
                    console.log('监听到子组件的sure动作了')
                },
                cancelHandle(val){
                    console.log(val)
                    console.log('监听到子组件的cancel动作了')
                }
            }
        });
    </script>
</body>
</html>
标签: 组件 vuejs emit props
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码