子组件向父组件传值的几种方式
1. 使用slot插槽
2. 使用ref属性
3. 使用$emit --- 推荐
1.使用slot插槽方式
<body>
<!-- 在父组件中通过slot就能获取子组件的message的值 -->
<!--
slot-scope 特性，可以接受传递给插槽的prop
slot-scope 声明了被接收的prop对象会作为slotProps 变量存在于div作用域中
-->
<div id="app">
<children>
<div slot="value" slot-scope="slotProps">
{{ slotProps.message }}
</div>
</children>
</div>
<template id="children">
<div>
<slot name="value" :message="message"></slot>
</div>
</template>
<script>
Vue.component('children',{
data: function () {
return{
message: 'I love china!!'
}
},
template: '#children'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
2.使用ref属性
<body>
<!-- 父组件中通过$ref获取子组件传来的值-->
<div id="app">
<children ref="text"></children>
<input type="button" @click="getMessage" value="点击我">
<div>
父组件：{{ this.parentMessage }}
</div>
</div>
<template id="children">
<div>
子组件：{{ this.message }}
</div>
</template>
<script>
Vue.component('children',{
data: function () {
return{
message: 'I love china!!'
}
},
template: '#children'
})
var app = new Vue({
el: '#app',
data: function () {
return {
parentMessage: ''
}
},
methods:{
// 点击事件触发getMessage函数，把子组件的值赋值给父组件parentMessage
getMessage(){
this.parentMessage = this.$refs.text.message
}
}
})
</script>
</body>
3.使用$.emit
<body>
<!-- 父组件中通过$ref获取子组件传来的值-->
<div id="app">
<!--
监听子组件的send事件
sendMessage 是父组件中绑定的函数名
-->
<children @send='getMessage'></children>
父组件: {{ this.parentMessage }}
</div>
<template id="children">
<div>
子组件:<input type="text" v-model="Message">
<input type="button" value="点击我" @click="sendMessage">
</div>
</template>
<script>
// 全局注册组件
Vue.component('children',{
data: function () {
return{
// 将message传给父组件
Message: ''
}
},
methods: {
sendMessage: function(e){
// sendMessage 是父组件指定的传数据绑定的函数,sendMessage事件触发后，自动触发事件send
// this.Message 是子组件给父组件传递的数据
this.$emit('send',this.Message);
}
},
template: '#children'
})
var app = new Vue({
el: '#app',
data() {
return {
parentMessage: ''
}
},
methods: {
// 监听触发子组件sendMessage，父组件执行getMessage事件，改变复复组件parentMessage
getMessage: function(data){
this.parentMessage = data
}
}
})
</script>
</body>
