1.父->子 prop
在子组件中使用:msg对应prop中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用prop实现父往子传值</title>
</head>
<body>
<div id="app">
父组件：<input type="text" v-model="msg"><br>
<cpn :msg="msg"></cpn>
</div>
</body>
<template id="cpn">
<div>
子组件：{{msg}}
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
data:{
msg: ''
},
components:{
cpn:{
template: '#cpn',
props:{
msg: String
}
}
}
})
</script>
</html>
2. 父->子 $refs
在父组件的<cpn>中定义ref="mycpn"属性，在方法中使用this.$refs.mycpn可以获取子组件的Vue对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用$refs实现父往子通信</title>
</head>
<body>
<div id="app">
<cpn ref="mycpn"></cpn>
<button @click="btnClick">按钮</button>
</div>
</body>
<template id="cpn">
<div>我是子组件</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'Hello World'
},
methods:{
btnClick(){
console.log(this.$refs.mycpn)
this.$refs.mycpn.showMessage()
}
},
components:{
cpn:{
template: '#cpn',
methods:{
showMessage(){
console.log('showMessage')
}
}
}
}
})
</script>
</html>
3.子->父 $emit
- 子组件定义事件
changeEvent，使用this.$emit传 (事件名,值) 给父组件 - 父组件中的子组件标签采用
@change-handler(事件名) 接收并声明changeHandler方法 - 在父组件的
changeHandler方法中写业务逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用$emit实现子往父传值</title>
</head>
<body>
<div id="app">
<cpn @change-handler="changeHadler"></cpn>
父组件：{{msg}}
</div>
</body>
<template id="cpn">
<div>
子组件：<input type="text" @input="changeValue">
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
data:{
msg: ''
},
methods:{
changeHadler(val){
this.msg = val
}
},
components:{
cpn:{
template: '#cpn',
methods:{
changeValue(event){
this.$emit('change-handler', event.target.value)
}
}
}
}
})
</script>
</html>
4.子->父 $parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用$parent实现子访问父</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<template id="cpn">
<div>
<div>我是子组件</div>
<button @click="btnClick">按钮</button>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message: 'Hello World'
},
components:{
cpn:{
template: '#cpn',
methods:{
btnClick(){
console.log(this.$parent)
console.log(this.$parent.message)
}
}
}
}
})
</script>
</html>
