父组件向子组件传递数据使用子组件的props属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- key=value 获取静态数据-->
<!-- :key=value 获取父组件中的数据-->
<!-- @key=value 给子组件绑定父组件的事件-->
<login title="我是静态标题" :name1="name" @test="test1"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
const login = Vue.component('login',{
template:`<div><h2 @click="test">用户登录 ==> {{title}} ===> {{name1}}</h2></div>`,
data(){
return{
}
},
props:['title','name1'],
methods:{
test(){
alert("我是子组件的方法");
this.$emit('test');
}
}
});
new Vue({
el:"#app",
data:{
msg:"gzy",
name:"动态获取父组件的title"
},
methods:{
test1(){
alert("我是父组件中的方法");
}
}
});
</script>
子组件向父组件传递数据通过方法传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- //子组件调用父组件的方法，驼峰命名法不能调用，要将其改为小写-->
<!-- @key=value(方法名) 向子组件传递方法-->
<login @testParent="testParent"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
//全局子组件
const login = Vue.component('login',{
template:`<div><h2><button @click="testChild">我是子组件</button></h2></div>`,
data(){
return {
msg:"我是子组件中的信息"
}
},
methods:{
testChild(){
alert("我是子组件的testChild方法");
//子组件调用父组件的方法，驼峰命名法不能调用，要将其改为小写
//这里emit里的字符串填写的时子组件@后的字符串
//将子组件里的数据可以通过参数回传给父组件
this.$emit('testparent',this.msg);
}
}
})
new Vue({
el:"#app",
data:{
msg:"我是父组件的信息"
},
methods:{
//子组件回传数据需要用被子组件传递的方法接受参数
testParent(msg){
alert("我是父组件中的方法testParent");
alert(this.msg);
this.msg = msg;
alert(this.msg);
alert("子组件向父组件传递参数成功");
}
}
});
</script>
总结
1.使用组件时可以在组件上定义多个属性以及对应数据
2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值
3.使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化
4.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
5.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
6.在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用
