「可先学习了解vue官网组件的基础知识」 组件基础
1.父组件向子组件传值 props
❝父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象
❞
子组件 Children.vue
<template>
<div id="children">
<h2>子组件</h2>
<br>
<h3>父组件向子组件传值: {{msg}}</h3>
</div>
</template>
<script>
export default {
name:'Children',
// 要接受父组件传递的参数
props: {
msg: {
type: Number,
},
},
}
</script>
<style scoped>
#children{
margin: 30px;
border: 2px solid red;
color: red;
}
</style>
父组件 App.vue
<template>
<h1>父组件</h1>
<!-- 注意 :msg 后面是一个对象，需要写冒号，如果省略：就是一个字符串 -->
<children :msg="msgval"></children>
</template>
<script>
//引入子组件
import Children from './components/Children.vue'
export default {
name: 'App',
data() {
return {
msgval: 20
}
},
components: {
Children
},
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
border: 2px solid;
}
</style>
效果如下
2.子组件向父组件传递数据 $emit 、$refs
第一种：$emit
❝使用$emit传递事件给父组件，父组件监听该事件
❞
子组件 Children.vue
<template>
<div id="children">
<h2>子组件</h2>
<br>
<!-- 使用@click 时间传值 -->
<button @click="pushMsg()">点击传值</button>
</div>
</template>
<script>
export default {
name:'Children',
methods: {
// 使用$emit传递事件给父组件
pushMsg() {
this.$emit("showmsg", "这是子组件===>父组件的值");
}
},
}
</script>
<style scoped>
#children{
margin: 30px;
padding: 30px;
border: 2px solid red;
color: red;
}
</style>
父组件 App.vue
<template>
<h1>父组件</h1>
<!-- 显示值 -->
<h3>{{msg}}</h3>
<children @showmsg='getChild' ></children>
</template>
<script>
import Children from './components/Children.vue';
export default {
name: 'App',
data() {
return {
msg:'默认值'
}
},
methods: {
//获取子组件的值
getChild(val) {
this.msg=val
},
},
components: {
Children
},
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
border: 2px solid;
}
</style>
效果如下
第二种：$refs
「子组件 同第一种」
父组件 App.vue
<template>
<div>
<h1>父组件</h1>
<br>
<input type="button" @click="parentEnvet" value="父组件触发" />
<h3>子组件的数据为：{{msg}}</h3>
<children @showmsg='wathChildEvent' ref="childcomp"></children>
</div>
</template>
<script>
import children from './components/Children'
export default {
name: 'App',
data() {
return {
msg:''
}
},
methods:{
wathChildEvent:function(val){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
console.log(val);//这是子组件的数据，将有子组件操作触发传给父组件
this.msg = val;
},
parentEnvet:function(){
this.$refs['childcomp'].pushMsg(); //通过refs属性获取子组件实例，又父组件操作子组件的方法pushMsg()触发事件$meit
}
},
components: {
children
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
border: 2px solid;
}
</style>
效果如下
3.非父子组件间传值 $emit/$on
❝在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的
❞emit来传递数据 传递的一方调用
$emit接收值的一方调用$on;
建立一个空的Vue实例,将通信事件挂载在该实例上
//emptyVue.js
import Vue from ‘vue‘
export default new Vue()
组件A childa.vue
<template>
<div id="a">
<h2>A组件</h2>
<h4>{{msg}}</h4>
<input type="button" value="把a组件数据传给b" @click ="send">
</div>
</template>
<script>
import vmson from "../assets/js/emptyVue.js"
export default {
data(){
return {
msg:"我是a组件的数据"
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
<style>
#a{
border: 2px solid red;
padding: 30px;
margin: 30px;
}
</style>
组件B childb.vue
<template>
<div id="b">
<h2>b组件:</h2>
<br>
<h4>a传的的数据为:{{msg}}</h4>
</div>
</template>
<script>
import vmson from "../assets/js/emptyVue.js"
export default {
data(){
return {
msg:""
}
},
mounted(){
vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
console.log(val);//打印结果：我是a组件的数据
this.msg = val;
})
}
}
</script>
<style>
#b{
border: 2px solid blue;
padding: 30px;
margin: 30px;
}
</style>
父组件：parent.vue
<template>
<div>
<childa></childa>
<childb></childb>
</div>
</template>
<script>
import childa from "../components/childa";
import childb from "../components/childb";
export default {
data(){
return{
msg:""
}
},
components:{
childa,
childb
},
}
</script>
