网站首页 文章专栏 vue组件的使用
vue组件的使用
编辑时间:2019-04-09 16:57:09 作者:田泽 浏览量:289

前言

开发过程中经常会碰到多个页面重复使用一个页面的问题可以通过vue的组件来实现这个功能,这里记录一下我使用vue组件的过程。

代码

父页面parent.vue向子页面传值或调用子页面child.vue的方法

parent.vue

<div>
<myChild v-bind:msg="msg" ref="myChild"></myChild>
<button @click="toChild">调用子组件方法</button>
</div>
<script>
//引入子页面
import myChild from "/child.vue";
export default {
components:{
myChild
},
data(){
return {
msg : "123"
}
},
methods : {
toChild(){
this.$refs.myChild.dataForParent();
}
}
}
</script>

child.vue

<template>
<div>{{msg}}</div>
</template>

<script>
export default {
props : ["msg"],
methods : {
dataForParent(){
console.log("父组件已经调用");
}
}
}
</script>


页面引入子组件之后写在components里面多个可以用逗号隔开,我这里子组件的别名是myChild,所以调用子组件的标签也叫<myChild></myChild>,这个标签也可以写成<my-child></my-child>看你们想要什么样的风格。

向子组件传值需要在子组件上通过v-bind绑定需要传的值我这里写的是v-bind:msg="msg"。可以写多个也可以把参数封装成对象传过去,子组件接收参数写在props : ["msg"]里,多个用逗号隔开。

页面中直接展示用{{msg}}展示,在方法中可以用this.msg获取接收的参数。如果是对象{{msg.xxx}}

调用子组件的方法需要在子组件的标签上写上ref,我这里写的是ref="myChild",调用方法语句

this.$refs.myChild.dataToParent();

子组件调用父页面的方法

parent.vue

<template>

<div>
<myChild @dataForChild="dataForChild" v-bind:msg="msg" ref="myChild"></myChild>
<button @click="toChild">调用子组件方法</button>
</div>
</template>

<script>
//引入子页面
import myChild from "/child.vue";
export default {
components:{
myChild
},
data(){
return {
msg : "123"
}
},
methods : {
toChild(){
this.$refs.myChild.dataToParent();
},
dataForChild(val){
console.log("子组件传来:"+val);
}
}
}
</script>


child.vue

<template>
<div>{{msg}}</div>
<button @click="sendParent"></button>
</template>

<script>
export default {
props : ["msg"],
methods : {
dataToParent(){
console.log("父组件已经调用");
},
sendParent(){
this.$emit("dataForChild","aaa");
}
}
}
</script>

父页面需要在子组件的标签上通过@方法名来监听,我这里写的是@dataForChild="dataForChild",子页面中调用父页面的方法通过

this.$emit("父页面子组件上通过@监听的方法名称","参数");语句调用,我这里写的是

this.$emit("dataForChild","aaa");

    如果想刷新子组件需要在父页面子组件的标签上使用v-if="xxx",使用语句

this.xxx= false;
this.$nextTick(() =>{
this.xxx = true;
})

来刷新组件。

我也刚接触VUE没多久,请各位大佬多多指教。

支付宝打赏 微信打赏

您的支持是我最大的动力。

吐槽区