这里写自定义目录标题
VUE 父子组件 (本文针对的是vue 2.x)
子组件的调用有两种方式,一个是全局注册,即在main.js
中注册,另外一种就是在需用使用到的页面里在components
中注册引入子组件
1.全局注册子组件
第一步,书写一个子组件(如果要引入其他的模块,就正常的import引用就好);
<template>
<div class="page-login">
<header class="silenc-header">
输入验证码
<i class="iconfont silenc-permanently" @click="goClose"></i>
</header>
<img src="https://osshanyadev.oss-cn-hangzhou.aliyuncs.com/front-end-static/special/jiaoyi-app/img/bound-logo.png" alt="" class="silenc-logo">
<p class="cannot-yet">请先输入验证码后登录</p>
<div class="login-form">
<div class="input-text">
<i class="iconfont phoneIcon"></i><input type="number"
oninput="if(value.length>11)value=value.slice(0,11)"
class="ui-text"
ref="phoneFocus"
placeholder="请输入新手机号码"
v-model="mobile" disabled>
</div>
<div class="input-text">
<i class="iconfont codeIcon"></i>
<input type="number"
class="ui-text w50"
oninput="if(value.length>6)value=value.slice(0,6)"
placeholder="请输入短信验证码"
v-model="vcode">
<span v-show="sendAuthCode"
class="sendVerification"
@click="getAuthCode">发送验证码</span>
<span v-show="!sendAuthCode"
class="sendVerification">{{auth_time}}秒后重新发送</span>
</div>
<div class="input-btn">
<button class="confirm"
:disabled="!vphone || !vcode"
@click="okLogin">登录</button>
</div>
</div>
</div>
</template>
<script>
var token;
var sumder;
export default {
props: ["mobile", "deviceType", "ip","p_show"],
data() {
return {
vphone: this.mobile,
};
},
components: {
Toast
},
created() {
},
mounted() {},
watch: {
visible(val) {
this.dialog_visible = val;
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/login.scss";
</style>
第二步,在子组件同目录下创建一个index.js
文件,将Vue.component
变为一个可导出的组件;
import phonevenify from './phoneverify'
const phoneVenify = {
install:function(Vue) {
Vue.component('phoneVenify',phonevenify)
}
}
export default phoneVenify;
第三步,在main.js
中使用import
导入组件的index.js再用Vue.use()
全局注册;
import phoneVenify from '@/components/popup-venify/index'
Vue.use(phoneVenify)
第四步,在父组件中引入子组件;
<template>
<!-- 引入子组件 -->
<phoneVenify v-show="p_show" :p_show.sync="p_show" :mobile="mobile" :deviceType="deviceType" :ip="ip"></phoneVenify>
</template>
<script>
var token;
var sumder;
export default {
data() {
return {
deviceType: "h5",
ip: "",
checkDevice: "",
userAgreementInfo: "",
mobile: "",
p_show: false
};
},
components: {
},
created() {
},
mounted() {},
watch: {
visible(val) {
this.dialog_visible = val;
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/login.scss";
</style>
子组件中的props
传参,需要在子组件中定义好 props: ["mobile", "deviceType", "ip","p_show"]
,然后在引入子组件中的父组件中使用:value='需要传入的值'
的方式使用;
在子组件中methods
使用传入的值,可直接正常的使用this.value
方法使用;
2.按需加载(注释:引用地址:https://segmentfault.com/a/1190000014381699)
父组件
<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的say方法,调用自己的parentSay方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSay(msg){
console.log(msg) // hello, parent
}
},
// 引入子组件
components:{
children: Children
}
}
</script>
子组件
<template>
<div class="hello">
<div class="children" @click="say">
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>
vue的父子组件间通信可以总结成一句话:
父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息,即 prop 向下传递,事件向上传递。