vue父子组件通信方式

1.props+$emit

①父组件引用子组件，并在子组件上v-bind,绑定要传的数据，同时注册引入子组件，
子组件通过props接收父组件传过来的数据，然后通过this.$props.值来用

举例：①子接收部分props

父组件：

<template><div><div><div @click="father">子组件向父组件传值，父组件接收</div><son :weather="weatherd" ;></son></div></div>
</template>
<script>
import son from "../Father/component/son.vue";
export default {components: { son },data() {return {weatherd: "今天天气不太好",};},
}

子组件：

<template><div><div @click="son" style="border:1px solid red;width:300px,height:300px">父组件向子组件传值，子组件接收</div></div>
</template>
<script>
export default {props: ["weather"],data() {return {};},methods: {son() {console.log(this.$props.weather);},
}

父组件向子组件传值，子组件接收

举例②父接收部分$emit (皆为部分代码，但是用到的全有)

②以收缩按钮为例，父组件定义数据通过子组件来接收，前边同理，然后子组件定义单击响应事件，
通过this.$emit('事件名')发出去，然后在父组件中的这个子组件身上通过@事件名来操作

父组件：Home

<template><div class="home"><el-container><el-aside width="200px" v-if="this.showAside == true"><NavMenu></NavMenu></el-aside><el-container><el-header><LogOut:showAside="showAside"@onShow="showAside = !showAside"></LogOut></el-header><el-main><router-view /></el-main></el-container></el-container></div>
</template><script>
// @ is an alias to /srcimport LogOut from "./component/LogOut.vue";
export default {name: "Home",components: {LogOut,},data() {return {showAside: true,};},methods: {// 调用子组件的方法},
};

子组件:LogOut

<template><div class="header"><i:class="this.showAside ? 'el-icon-s-fold' : 'el-icon-s-unfold'"@click="onShow"></i><div class="headerPhoto"><el-avatar :src="circleUrl"></el-avatar><el-dropdown @command="handleCommand"><span class="el-dropdown-link">admin<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人中心</el-dropdown-item><el-dropdown-item command="exit">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template>
<script>
export default {props: ["userList", "showAside"],data() {return {circleUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",};},methods: {onShow() {this.$emit("onShow");},
}

2.ref+$refs

父组件想要用子组件的方法，此时父组件已经引用了子组件，父组件只需要在子组件上用ref='要用的子组件的方法/绑定一个名字'，然后通过
this.$refs.ref.'绑定的名字'.父组件需要用的方法名即可

父组件

<template><div><div><div @click="father">子组件向父组件传值，父组件接收</div><!-- <son :weather="weatherd"></son> --><son :weather="weatherd" ref="happy" ;></son></div></div>
</template>
<script>
import son from "../Father/component/son.vue";
export default {components: { son },data() {return {weatherd: "今天天气不太好",};},methods: {father() {//   console.log("..");this.$refs.happy.happy();},},
};

子组件：

export default {props: ["weather"],data() {return {};},methods: {son() {console.log(this.$props.weather);},// son() {//   this.$emit("son");// },happy() {console.log("掌握父子传值，心情happy");},},
};

点击子组件向父组件传值，父组件接收

===============================================

分割线其他方法后续补充目前练习用到了这两个.有不对的地方感谢指正

vue父子组件通信方式相关推荐

vue父子组件通信方式哪几种
第一种:props和$emit() parent.vue <template><div id="app"><div>父组件:{{message} ...
vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
vue 父子组件组件挂载组件通信 slot插槽
目录 vue 父子组件挂载父组件往子组件中传值子组件向父组件传值 this.$emit() this.$refs 父组件可以通过它直接引用注册过的子组件DOM中的数据插槽默认插槽具名插槽 v ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...

vue父子组件通信方式

vue父子组件通信方式相关推荐

最新文章

热门文章