vue 父组件给子组件传值子组件给父组件传值的实例代码
更新时间：2019年04月15日 08:26:37 作者：quitpoison
这篇文章主要介绍了vue 父组件给子组件传值，子组件给父组件传值,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
父组件如何给子组件传值
使用props
举个例子：
子组件：fromTest.vue，父组件 app.vue
fromTest.vue
<template>
<h2>{{title}}</h2> //title必须是父组件传递的
</template>
<script>
export default (){
props:["title"] //可以是数组，也可以是对象
//如何对title进行校验
//props:{
// type:String,required:true //如果父组件不传值就会报错
//}
}
</script>
父组件 app.vue
<template>
<from-test title = "你好 "></from-test> //1.指定值
//<from-test :title = "titleVar "></from-test> //2.动态传值 titleVar 是变量
</template>
<script>
export default (){
data(){
titleVar :'你好' //动态传值就代表数据这里需要定义titleVar
}
}
</script>
子组件如何给父组件传值
事件,$emit
子组件
button.vue
<template>
<button @click='handClick'></button>
</template>
<script>
export default(){
methods(){
handClick(){
this.$emit(lalala,{message:"heihei"}) //lalala是函数名称，后面是想要传递的值
}
}
}
</script>
父组件
app.vue
<template>
<k-button @lalala = handClick></k-button>
</template>
<script>
import KButton form './components/KButton' //自己要记得导入组件，引用组件名称
export default(){
components(){
KButton
}
methods(){
handClick(obj){
console.log(obj) //点击button,控制台就收到值了
}
}
}
</script>
总结
以上所述是小编给大家介绍的vue 父组件给子组件传值子组件给父组件传值的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
vue3中配置文件vue.config.js不生效的解决办法
这篇文章主要介绍了vue3中配置文件vue.config.js不生效的解决办法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了vue.js源代码core scedule.js的学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue3+elementPlus项目支持设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最近工作中遇到了一个需求,需要利用echarts在地图上面标记点位,所下面这篇文章主要给大家介绍了关于如何利用Echarts根据经纬度给地图画点画线的相关资料,需要的朋友可以参考下2022-05-05
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
vue是一套用于构建用户界面的渐进式框架。接下来通过本文给大家分享Vue.js下载方式及基本概念，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下2018-06-06
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下2023-03-03
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了Vue 实现一个简单的鼠标拖拽滚动效果插件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论