总结：
被封装好的组件，才能被调用 组件如何封装，请查看文档
组件封装好后，要进行全局调用，在components文件夹下创建index.js文件，用 Vue.component() 进行全局调用（如下图）
注意：全局调用，是component。局部调用，是components
如果组件引用了一个组件，那么该组件就叫父组件。被引用的这个组件就叫子组件
下文中的父组件调用子组件，在父组件进行三个操作步骤：
1、引入子组件import Login from '../components/Login/Login'；
2、 局部调用（components）
components: {
Login
},
3、<template>内插入 <Login />
1、props 【源代码在最后面】
父组件给子组件传值，子组件里的props接受传值（该值可以是数组，也可以是对象） 【下图中的五个变量最好写同一个，不出错】
父组件里调用封装好的子组件<Login :msg="msg" /> 中绑定的属性 :msg（可以动态绑定，也可以静态绑定），这里是动态绑定。其父组件调用<login>组件里绑定的:msg 与它组件里的 props 对象里的msg保持一致
我们可以加入v-model进行数据绑定
2、$emit 【源代码在最后面】
this.$emit('自定义事件名字'，'要传给父组件的内容')，在父组件中接收自定义事件
<button @click="showMessage">子组件给父组件传参</button>
子组件内有一个触发函数（<button>元素里的 @click="showMessage"），当这个子组件加载到父组件上时，点击这个按钮，就会触发 showMessage()函数，这个函数执行this.$emit('showMsg',data)，抛出一个data对象，被父组件接收。
很明显地看出，父组件中的<Login :msg='msg' @showMsg='showMsg' /> ，showMsg没有传参数
而methods方法体内，
，showMsg()是有接收参数的。
橙色部分事件名保持一致，这个showMsg是连接父子通信的桥梁
下文：
props:父组件向子组件传值，先在父组件中动态绑定要传的值，（注意：如果传的值是字符串，可以不用加冒号动态绑定），然后在子组件中用props接受传过来的值
代码：
子组件
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: ''
}
}
}
</script>
父组件：
<template>
<div>
<Login :msg="msg" />
<input type="text" v-model="msg">
{{msg}}
</div>
</template>
<script>
import Login from '../components/Login/Login'
export default {
components: {
Login
},
data() {
return {
msg: 'this is a World'
}
}
}
</script>
$emit:子组件向父组件传值,通过事件触发，先在子组件中注册点击事件，在事件中用 this.$emit('自定义事件名字'，'要传给父组件的内容')，在父组件中接收自定义事件
父组件：
<template>
<div>
<Login :msg='msg' @showMsg='showMsg' />
</div>
</template>
<script>
import Login from '../components/Login/Login'
export default{
components: {
Login
},
data(){
return {
msg:'This is a World'
}
},
methods: {
showMsg(data) {
this.msg = data.num
console.log(data.num)
}
}
}
</script>
子组件：
<template>
<div class="img-box">
<div class="img-box1">
<div>
<button @click="showMessage('参数')">子组件给父组件传参</button>
<h1>{{msg}}</h1>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: ''
}
},
methods: {
showMessage(val){
const data = {
num: val
}
this.$emit('showMsg',data)
}
}
}
</script>
子组件也可以这样写：
<template>
<div class="img-box">
<div class="img-box1">
<div>
<img src="../../assets/logo.png" alt="Logo-pic" />
<button @click="showMessage">子组件给父组件传参</button>
<h1>{{msg}}</h1>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: ''
}
},
methods: {
showMessage(){
const val = '参数'
const data = {
num: val
}
this.$emit('showMsg',data)
}
}
}
</script>
我要评论
网友评论