如何运用Vue自定义组件以及组件的传值
Vue自定义组件
引入组件
首先在项目内的components新建.vue文件。
创建完成之后搭建完整的框架。其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets),这个插件会让我们在打代码的时候少走一些弯路,他会给我们相应的提示。如下图
name值一定要写对。在App.vue引入文件,注册组件。
写组件,组件的名称就是文件名。
Vue的组件传值
Vue组件组件传值:父传子、子传父、子传子在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
- 父传子
父组件
<template>
<div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child :inputName="name"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script>
子组件
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
inputName: String,
required: true
}
}
</script>
- 子传父
子组件
<template>
<div>
子组件:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childValue)
}
}
}
</script>
父组件
<template>
<div>
父组件:
<span>{{name}}</span>
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:childByValue="childByValue"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
子传父的实现方式就是用了 this.emit来遍历getData事件,首先用按钮来触发setData事件,在setData中用this.emit 来遍历 getData 事件,首先用按钮来触发 setData 事件,在 setData 中 用 this.emit来遍历getData事件,首先用按钮来触发setData事件,在setData中用this.emit 来遍历 getData 事件,最后返回 this.msg
总结:
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。
- 非父子
vue中没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件如果一定需要子对子传参,可以先从传到父组件,再传到子组件(相当于一个公共bus文件为了便于开发,vue 推出了一个状态管理工具 vuex,可以很方便实现组件之间的参数传递。
最新文章
- iOS 如何使用Safari浏览器打开app
- 【JavaScript】--ajax
- DOM的概念(1)
- Linux 网络编程详解五(TCP/IP协议粘包解决方案二)
- Python学习笔记——基本语法
- 思考之一——PM(Project Manager)
- Js获取当前日期时间及格式化操作
- php 封装分页查询类
- 【剑指offer 面试题21】包含min函数的栈
- 一个坐标点围绕任意中心点旋转--C#实现
- LESS学习总结
- 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(五)
- VIM学习1
- hdu 4427 Math Magic
- iSlider手机平台JS滑动组件
- ajax和json详解
- Extjs 3.4 和 web SSH(Ajaxterm)-howge-ChinaUnix博客
- nyoj 130 同样的雪花 【哈希】
- WebService之CXF注解之四(测试类)
- 临时关闭Mac SIP系统完整性保护机制
热门文章
- 20230225 TI Electromagnetic compatibility testing methods and standards
- Windows系统运行selenium
- npm 更改在线仓库镜像地址
- Windows10 Vmware安装Centos虚拟机
- 获取异步请求的结果 | JS | VUEX | axios
- C# 笔记--Sendkeys winform窗体控件回车及全选
- 渲染杂谈:early-z、z-culling、hi-z、z-perpass到底是什么?
- vue provide inject 方法
- CF1067E 题解
- 5. icon创建