vue项目原理分析-1：组件间传值

整个项目目录（create project后）

vue.config.js的配置

// vue.config.js 常⽤配置
module.exports = {devServer:{port:3333,//自定义端口号open:true//是否自动打开}// 基本路径, vue.cli 3.3以前请使⽤baseUrlpublicPath: '/',// 输出⽂件⽬录outputDir: 'dist',// ⽤于嵌套⽣成的静态资产（js，css，img，fonts）的⽬录。assetsDir: '',// ⽣产环境sourceMapproductionSourceMap: true,// webpack配置configureWebpack: () => {},chainWebpack: () => {},// css相关配置css: {// 启⽤ CSS modulesmodules: false,// 是否使⽤css分离插件extract: true,// 开启 CSS source maps?sourceMap: false,// css预设器配置项loaderOptions: {},},// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: 8080,proxy: {}, // 设置代理},// 第三⽅插件配置pluginOptions: {// ...}
}

vue中组件间传值常⽤的⼏种⽅式

⽗⼦组件传值

props / $emit
⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据
⽗组件中通过监听⼦组件中$emit的⾃定义事件接收数据
$parent / $children
⼦组件中通过this.$parent这个对象获取⽗组件中的数据
⽗组件中通过this.$children这个数组获取⼦组件中的数据
$ref
⽗组件中定义⼦组件中的ref属性后，通过this.$refs.定义的属性名获取⼦组件数据

⾮⽗⼦间传值

$attrs / $listeners

// 原理上就是建⽴⼀个公共的js⽂件，专⻔⽤来传递消息

事件总线
// bus.js
import Vue from 'vue'
export default new Vue;
// 在需要传递消息的地⽅引⼊
import bus from './bus.js'
// 传递消息
bus.$emit('msg', val)
// 接受消息
bus.$emit('msg', val => {console.log(val) //传值
})

App.vue

<template><div id="app">this is app<!--    <router-view />--><button @click="passMsg">传你</button><m-parent :msg="c"></m-parent>//这是vue官方文档里的命名规范 MParent变成 m-parent<router-link>to ="/home" > home</router-link><button @click="toHome">home</button><router-view></router-view>hi Iam there</div>
</template><style></style>
<script>
import bus from './util/bus'
import MParent from './views/Parent'//引用export default {data(){return{a:'msga',}},components: {MParent //注册},methods:{passMsg(){bus.$emit('msg','i am from app')},toHome: function () {// this.$router.push({path:'/home',query:{name:'Jack'}})传递参数this.$router.push({params: {id: 3},name: 'home'})}}
}
</script>

Parent.vue

<template><div><h1>Parent</h1><m-child msg="from Parent msg" @showMsg="showMsg" ref="child" v-bind="$attrs"></m-child><h3>{{ msg }}</h3></div>
</template><script>
import MChild from './Child'//引用
export default {data() {return {msg: ''}},components: {MChild//注册},methods: {showMsg(val) {this.msg = val//定义了showmsg这个事件，能接收到child.vue}},mounted() {console.log(this.$children[0].msg)console.log('ref', this.$refs.child)}
}
</script><style scoped></style>

Child.vue

<template><div><h3>Child</h3><h5>{{ msg }}</h5><h6>{{childMsg}}</h6><button @click="passMsg">走你！</button>//触发的事件</div>
</template><script>
import bus from "../util/bus"//非父子关系
export default {props: { //props要接收父组件里的值得时候（<m-child msg="from Parent msg" @showMsg="showMsg" ref="child" v-bind="$attrs"></m-child>）msg: {type: String,default: ''}},data() {return {childMsg: 'child msg'}},methods: {passMsg() {this.$emit('showMsg', 'i am from child') //注册这个事件}},mounted (){console.log('attrs',this.$attrs)bus.$on('msg',(val)=>{this.childMsg=val})//监听这个mag，然后传值}
}
</script><style scoped></style>

vue项目原理分析-1：组件间传值相关推荐

vue项目原理分析-3：vuex
vuex官方网站 vuex初级: export default {// 组件间公共数据部分state: {},// 需要改变state中的数据时,要在mutation⾥定义改变的⽅法mutations ...
Vue项目中实现父子组件之间传值
1.路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系 {path: '/father',name: 'father',component: father,children ...
vue项目原理分析-2：路由
路由的基本配置基本参数 path 路由的访问路径.即url component 访问路径对应的组件扩展参数 name 路由指定命名,设置后可⽤params传参及使⽤name进⾏路由跳转路由的跳转 ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...
vue 组件间传值、兄弟组件、bus方式 ( 1 分钟看懂 )
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. bus方式的组件间传值其实就是建立一个公共的js文件,专门用来传递消息 1.建立公共文件,并引入新 ...
vue向ifarm传值_vue组件间传值
目前流行组件化开发,vue组件间传值是一个非常常用的功能,有时候仅仅是父子和兄弟之间简单的传值,我们就没有必要直接引入vuex来进行管理. # 1.父子间传值 ## 1.1 子组件向父组件传值子组件 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...