父子组件使用 props和$emit传值 总结:
一: 父传子。注意点有3个。
第1: 在js中用驼峰式命名,在html中替换成短横线 分割式命名
在html中
<child my-message="hello"/>
在js中:
子组件中
props:['myMessage']
第2: props规范写法
如果 有默认值,而且是 数组或者对象类型,props需要用规范写法:既必须用对象形式且必须 用函数返回。
默认值如果不是数组或者对象,则可以直接用数组形式写。
例:
props:{
columns: {
type:Array,
default () {
return [ ]
}
},
ap: {
type:Object,
default () {
return {}
}
},
cc: {
type:Boolean,
default:true
},
cl: {
type:String,
default:"哈哈"
},
Kkk: {
type:Function,
default(){
}
},
第3: 如果 设置了required 就不要设置 default
cc: {
type:String,
required:true//设置了required无需设置default
},
二:子传父。
设置的自定义事件是会自动触发的。
例如:代码如下
在 Hello.vue template中(子组件中),添加一个input输入框,给它一个v-model 获取用户的输入,再添加keypress的事件,用于发射事件,传输数据。script 中添加data,定义变量来获取用户的输入,添加methods 来处理keypress事件的处理函数enter, 整个Hello.vue 文件如下
子组件中:
<template>
<div class="hello">
<!-- 添加一个input输入框 添加keypress事件-->
<input type="text" v-model="inputValue" @keypress.enter="enter">
<p>{{mesFather}}</p>
</div>
</template>
<script>
export default {
props:['mesFather'],
// 添加data, 用户输入绑定到inputValue变量,从而获取用户输入
data: function () {
return {
inputValue: ''
}
},
methods: {
enter () {
this.$emit("valueUp", this.inputValue)
//子组件发射自定义事件valueUp, 并携带要传递给父组件的值,
// 如果要传递给父组件很多值,这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);
}
}
}
</script>
在App.vue 中,(父组件中) template中hello 组件绑定一个自定义事件,@valueUp =“receive”, 用于监听子组件发射的事件,再写一个 p 元素,用于展示子组件传递过来的数据,
子组件传递过来的数据 {{ childMes }}
相应地,在scrpit中,data 中,定义一个变量childMes, 并在 methods 中,定义一个事件处理函数reciever。整个App.vue修改如下:
父组件中:
<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 添加自定义事件valueUp -->
<hello mes-father="message from father" @valueUp="recieve"></hello>
<!-- p元素,用于展示子组件传递过来的数据 -->
<p>子组件传递过来的数据 {{childMes}}</p>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
},
// 添加data
data: function () {
return {
childMes:''
}
},
// 添加methods,自定义事件valueUp的事件处理函数recieve
methods: {
recieve: function(mes) { // recieve 事件需要设置参数,这些参数就是子组件传递过来的数据,因此,参数的个数,也要和子元素传递过来的一致。
this.childMes = mes;
}
}
}
</script>
这时在input中输入内容,然后按enter键,就以看到子组件传递过来的数据,子组件向父组件传递数据成功。
当在input输入框中输入数据,并按enter键时,它会触发keypress.enter事件,从而调用事件处理函数enter, 在enter 中, 我们发射了一个事件valueUp, 并携带了一个参数;
由于在<hello @valueUp=”recieve”></ hello> 组件中(父组件中), 我们绑定valueUp 事件,所以父组件在时刻监听valueUp 事件。
当子组件发射value 事件时,父组件立刻捕获到,并立即调用它的回调函数receive, 在receive 中,我们获取到子组件传递过来的数据,并赋值了data 中的变量childMes, 由于data 数据发生变化,从而触发dom更新,页面中就显示子组件传递过来的内容。
其实在子组件中, props 最好的写法是props 验证,我们在子组件Hello.vue中写 props:[‘mesFather’], 只是表达出,它接受一个参数mesFather, 如果写成props 验证,不仅能表达出它需要什么参数,还能表达参数类型,并且如有错误,vue 会做出警告。现在把props 改成props 验证的写法, Hello.vue 中的js中的props修改如下:
props: {
'mesFather': {
type: String,
default: 'from father',
required:true
}
}
如果是组件与组件之间的通信非常复杂,不光是父子组件,还有兄弟组件,那就需要用到状态管理,vuex;