内容提要:
1. 父传子(`props`)
2. 子传父(点击事件+$emit)
3. 同级组件互传($on+$emit)
4. 跨组件互传 ($attrs)
1. vimport 快速导入组件
import Parent from '@/views/Parent.vue';
@ 表示 src路径
2. 引入组件后
一定要注册 ,然后使用组件
components: { //注册组件
Parent
},
//使用组件(首字母可小写)
<Parent></Parent>
3. 父传值到子组件 步骤
3.1 在父组件引入子组件
3.2 在父组件使用 v-bind绑定数据到 子组件
3.3 在子组件使用 props接收
Parent.vue ===========================
<child :msg="msg"></child>
Child.vue ============================
props: {
msg: {
type: String, // 传递的数据类型
default: ''
},
},
4. 子组件传值到父组件 步骤
4.1 在子组件创建点击事件
<!-- 通过 事件方式传值到 父组件 -->
<button @click="sendToParent">发送数据到父组件</button>
4.2 子组件数据的准备
data() {
return {
str: "子组件传值到父组件。。。"
}
},
methods: {
sendToParent() {
this.$emit('show',this.str) //调用 数据源的key
}
},
4.3 父组件接收数据
<child v-bind:msg="msg" @show="getData"></child>
这里的 @show就是 4.2中子组件的$emit中的参数1的 事件名称
getData是父组件为取出子组件数据,自定义的一个函数名(任意取名)
接收代码的实现
data() {
return {
msg: '来自父组件的数据。。。。',
abc:''
}
},
methods: {
getData(val) { //这里的val是 this.$emit('show',this.str) 这里的 this.str
this.abc = val //将 接收的 val赋值给 abc
}
},
5. 使用事件消息传递 数据(非父子 app-parent)
5.1 创建公共 js
import Vue from 'vue'
export default new Vue;
//暴露 vue对象 让其他组件使用
5.2 分别在 需要传值的 2个组件引入js
App.vue ============================================
import bus from './utils/bus'
methods: {
sendData() {
bus.$emit('message','APP中的数据。。。。')
}
},
Parent.vue ==========================================
import bus from './utils/bus'
//在生命周期函数中接收
created () {
bus.$on('message',val=>{
this.message = val
});
},
6. 使用$attrs 传值(非父子–多层传值 app-parent-child)
App.vue===============================================
data() {
return {
a:'111',
b:'222'
}
},
<Parent :msga="a" :msgb="b"></Parent>
Parent.vue=============================================
<Child v-bind="$attrs"></Child>
Child.vue==============================================
//使用生命周期函数
mounted () {
console.log('attrs',this.$attrs)
},
详细代码:
App.vue
<template>
<div id="app">
<parent :messagea="a" :messageb="b"></parent>
<button @click="sendData">发送数据到Parent</button>
</div>
</template>
<script>
import Parent from '@/views/Parent'
import bus from '../utils/bus'
export default {
name: 'App',
components: {
Parent
},
methods: {
sendData() {
bus.$emit("message",this.message)
}
},
data() {
return {
message: "传递给Parent的值。。。",
a:"a",
b:"b"
}
}
}
</script>
<style>
*{
margin: 20px auto;
padding: 0;
list-style: none;
background-color: #ccc;
text-align: center;
}
</style>
Parent.vue
<template>
<div>
<h3>我是父组件</h3>
<h5>{{abc}} ----- {{message}}</h5>
<child :msg="msg" @show="getData" v-bind="$attrs"></child>
</div>
</template>
<script>
import Child from "@/views/Child";
import bus from '../../utils/bus'
export default {
components: { Child },
data() {
return {
msg: "来自父组件的数据",
abc: "",
message:""
};
},
methods: {
getData(val) {
this.abc = val;
}
},
mounted () {
bus.$on("message",val=>{
// console.log(val);
this.message=val
});
},
};
</script>
Child.vue
<template>
<div>
<hr>
<h4>我是子组件</h4>
{{msg}}
<ul>
<li>{{$attrs.messagea}}</li>
<li>{{$attrs.messageb}}</li>
</ul>
<button @click="sendToParent">传值到父组件</button>
<hr>
</div>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit("show",this.str)
}
},
data() {
return {
str: "子组件正在给父组件传值,哈哈哈!"
}
},
props: {
msg: {
type: String,
default: ''
},
},
mounted () {
console.log("attrs",this.$attrs);
},
}
</script>
bus.js
(放入新建utils工具包里)
import Vue from 'vue'
export default new Vue
结果参考: