父向子传值
- 父组件绑定一个属性
//绑定title属性,且给title赋值
<Sunny :title="msg"></Sunny>
//data里面给title属性赋值msg
data () {
return {
msg:'父组件的title属性数据内容',
}
- 子组件用props接受这个属性
//拿到title属性并使用
<p>{{this.title}}</p>
//子组件用props接受title这个属性
props:["title"]
//或者写全props
props:{
title:{
//数据类型:字符串为type:String,数组Array,对象Object
type:String,
//默认值
default:"默认标题"
},
子向父传值
- 父组件绑定一个自定义事件
//父组件里面使用子组件,绑定一个自定义事件
<Sunny :title="msg" @clickHandler="clickFun"></Sunny>
methods:{
//事件方法
//父组件接受传过来的参数 a
clickFun(a){
console.log('button 1 click...',a) //打印出来 a 的值是123
}
}
- 子组件绑定一个点击事件,点击事件通过
this.$emit
来触发父组件绑定的自定义事件
//button绑定一个点击事件
<button @click="sunnyClickHandler">按钮</button >
methods:{
sunnyClickHandler(){
//this.$emit触发事件
//调用到父组件中的方法clickHandler,可以传参给父组件
return this.$emit("clickHandler",123)
}
}
以下为父子组件的全部代码!
父组件
下面展示一些 父组件代码
。
<template>
<div class="hello">
<p>在Hello World 组件中</p>
<Sunny :title="msg" :imgUrl="imagesUrl" :btnText="buttonText" @clickHandler="clickFun"></Sunny>
<Sunny :title="msg2" :imgUrl="imagesUrl2" :btnText="buttonText2" @clickHandler="clickFun2"></Sunny>
<Sunny :items="lessons"></Sunny>
</div>
</template>
<script>
import Sunny from "./Sunny"
export default {
name: 'HelloWorld',
components:{Sunny},
data () {
return {
msg:'父组件的msg属性数据内容',
imagesUrl:require("../assets/sunny.png"),
buttonText:'按钮1',
msg2:'我是标题',
imagesUrl2:require("../assets/sunny.png"),
buttonText2:'按钮2',
lessons:[
{"id":1,"name":"java"},
{"id":2,"name":"c"},
{"id":3,"name":"sql"}
]
}
},
methods:{
clickFun(a){
console.log('button 1 click...',a)
},
clickFun2(){
console.log("button 2 click...")
}
}
}
</script>
子组件
下面展示一些 子组件代码
。
<template>
<div class="hello">
<P>Sunny Component</P>
<div class="session">
<img :src="this.imgUrl" class="iconStyle item">
<p class="item">{{this.title}}</p>
<div class="btnClass item" @click="sunnyClickHandler">{{btnText}}</div>
</div>
<ul>
<li v-for="item in items" :key="item.id">{{item.id}}----{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Sunny',
// data () {
// return {
// title:"默认title",
// imgUrl:require("../assets/sunny.png"),
// btnText:"默认按钮"
// }
// },
//定义props接受父组件的属性
// props:["title","imgUrl","btnText"],
props:{
title:{
type:String,
default:"默认标题"
},
imgUrl:{
type:String,
default:require("../assets/sunny.png")
},
btnText:{
type:String,
default:"默认按钮"
},
items:{
//数据类型:数组Array,对象Object
type:Array,
//默认值
// default:[]
default:()=>{
return []
}
}
},
methods:{
sunnyClickHandler(){
//调用到父组件中的方法
return this.$emit("clickHandler",123)
}
}
}
</script>