Vue自定义组件及组件传值

vue自定义组件:

1、在src中components中,新建文件,后缀名为.vue组件（首字母建议大写）例如:Weekly.vue

2、Weekly.vue:

3、在app.vue中引用组件:

js中先引入

// 第一步引入组件

import Weekly from './components/Weekly.vue'

// 第二步在export default注册组件

components: {

Weekly

}

Vue组件组件传值：父传子、子传父、子传子:

Vue常用的三种传值方式有：

父传子
子传父
非父子传值

1. 父组件向子组件进行传值:

父组件：
<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>

2. 子组件向父组件传值:

子组件：
<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>

3. 非父子组件进行传值:

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共bus.js:
import Vue from 'vue'
export default new Vue()组件A：
<template><div>A组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue"></div>
</template>
<script>// 引入公共的bug，来做为中间传达的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}},methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)}}}
</script>组件B：
<template><div>B组件:<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div>
</template>
<script>import Bus from './bus.js'export default {data () {return {name: 0}},mounted: function () {var vm = this// 用$on事件来接收参数Bus.$on('val', (data) => {console.log(data)vm.name = data})},methods: {getData: function () {this.name++}}}
</script>

Vue自定义组件及组件传值相关推荐

vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
vue自定义翻页组件
效果图如下: 1.在components建立page.vue文件 <template><div class="pagination"><!-- 上 - ...
vue自定义星星评分组件rater，可自定义星星图片，大小，暂不支持半颗星
在线预览地址:https://wenyuming.github.io/w-demos/dist/index.html#/rater 鉴于第三方ui库的星星评分组件星星基本上是固定,不能自定义,使用起来 ...
vue自定义tree树组件
组件内容 <template><div class="tree-box"><divclass="tree-box-content" ...

Vue自定义组件及组件传值

Vue自定义组件及组件传值相关推荐

最新文章

热门文章