vue组件通信:父传子—子传父
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频下面我就来写分享以下我的课程总结父传子1.首先想要实现组件的父子通信,那么我们第一步要先创建一个子组件,与父组件绑定,那么先看以下原代码...
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频
我看到了弹幕上说很多人在这一块不理解;下面我就来写分享以下我的课程总结
父传子
为什么要进行“传”的这个操作?
答:父子就算绑定了,也子组件也无法用胡子语法将父组件里的内容显示到页面上
首先想要实现组件的父子通信,那么我们第一步要先创建一个子组件,与父组件绑定,那么先看以下原代码,我来逐步分析
<div class="bigbox">
<!-- 这里要先将绑定的子组件使用以下,然后将父传给子 -->
<son :cfrsit="frist" :clast="last" :chello="hello"></son>
</div>
<template id='temp'>
<!-- 子 -->
<div>
<son>{{cfrist}}</son><br>
<son>{{clast}}</son><br>
<son>{{chello}}</son>
</div>
</template>
<script src="../vue文件/vue.js"></script>
<script>
const son = {
template: '#temp',
props: {
cfrist: {
type: Object,
// 这里代表是从父传来的是对象 默认值必须是一个函数
default () {
return {}
},
// 这里代表限定必须要在子标签里写传来的,否则报错
required: true
},
clast: {
type: Object,
default () {
return {}
},
required: true
},
chello: {
type: String,
default: ''
}
}
}
const father = new Vue({
el: '.bigbox',
data: {
first: {
name: 'qm',
age: '20',
address: '安徽'
},
last: {
name: 'zjj',
age: '21',
address: '湖北'
},
hello: '我是一个字符串类型'
},
// 绑定子组件
components: {
son
}
})
1.首先创建一个子组件
const son = {
template: '#temp',
// 这里的props是用来接收父传过来的方法以及属性
props: {
}
}
2.这里的template模板我是放在了上面定义
<template id='temp'>
<!-- 子 -->
<div>
<son>{{cfrist}}</son><br>
<son>{{clast}}</son><br>
<son>{{chello}}</son>
</div>
3.我们再创建一个父组件,并给予一个对象类型,且绑定我们刚才创建的子组件
const father = new Vue({
el: '.bigbox',
data: {
first: {
name: 'qm',
age: '20',
address: '安徽'
},
last: {
name: 'zjj',
age: '21',
address: '湖北'
},
hello: '我是一个字符串类型'
},
// 绑定子组件
components: {
son
}
})
4.现在我们要进行 “父传子” 这里就是将父亲里的对象传给子组件,那么我们需要再子组件中使用 --> props这个内置对象来接收 ;这个内置对象里可以支持接收以下类型:
props: {
cfrist: {
// 这里代表父组件传来的是一个对象类型
type: Object,
// 这里代表是从父传来的是对象 默认值必须是一个函数
default () {
return {}
},
// 这里代表限定必须要在子标签里写传来的,否则报错
required: true
},
clast: {
type: Object,
default () {
return {}
},
required: true
},
chello: {
type: String,
default: ''
}
}
}
那么以上代码肯定有很多疑惑
疑惑1:为什么这个子组件里是cfrist 和 clast 和chello呢 答:这里只是个给它起个名字而已
疑惑2:为什么chello和其他俩个的默认值定义的不一样呢 答:如果父组件传过来的是对象和数组类型,则默认值必须是以对象的形式返回,这一点很多人容易忽略
那么我们再往下走:
那我们现在是否已经完成了操作了呢?答案是否定的
因为只是接收了父亲传来的信息,我们还没有使用呢
5.我们刚刚只是将接收操作写完了,还没有进行真正意义上的传递呢;这里我们既然创建了一个子组件,那么我们就必须要使用,在这同时,我们要用v-bind的形式来进行动态赋值操作
<div class="bigbox">
<!-- 这里要先将绑定的子组件使用以下,然后将父传给子 -->
<son :cfrsit="frist" :clast="last" :chello="hello"></son>
</div>
6.现在才算是真正意义上的已经完成了父传子的通信,现在子组件里的template已经可以使用胡须语法将父组件的内容显示到子组件里了
<template id='temp'>
<!-- 子 -->
<div>
<son>{{cfrist}}</son><br>
<son>{{clast}}</son><br>
<son>{{chello}}</son>
</div>
</template>
注:有很多b站的伙伴看coderwhy老师的课程在这里卡了壳,这是我的课程总结,希望能对屏幕前的你有所帮助;下面我们再来看看这个子传父又是个什么操作
子传父
子传父这个知识coderwhy老师是通过一个小案例来展开的,那我们来看看这个到底是怎么一回事
主要核心思想:
1.将编写好的子组件通过$emit(’自定义事件‘,item)发射一个自定义事件
2.实现子组件点击时,父组件能够接收到这个点击事件的对象,来定义一个方法实现某些功能
步骤:
1.还是要创建我们的子组件,编写好子组件功能后,将标签展现出来
<template id='temp'>
<div>
<button v-for="item in categories" style="display: block;margin-top: 20px;"
@click = "itemclick(item)">{{item.name}}
<!-- 这里要将item传过去,为了拿到id,并发射给父组件 -->
</button>
</div>
</template>
<script>
// 创建子组件
const cpn = {
template: '#temp',
data() {
// 子组件是一个数组,里面添加了4个对象
return {
categories: [{
id: 1,
name: '商品'
}, {
id: 2,
name: '购物'
}, {
id: 3,
name: '客服'
}, {
id: 4,
name: '退出'
}, ]
}
},
methods: {
itemclick(item) {
// 将点击的item传给父组件
// 发射出去一个事件 父组件负责接收这个事件 这里的事件是自定义事件
this.$emit('btn-click', item)
}
},
}
2.我们已经创建好了一个子组件,我们要实现的是点击一下某个按钮,我每点击某个按钮,就会得到相应的categories数组里的某个对象,并让这个被点击的对象发射给父组件;
methods: {
itemclick(item) {
// 将点击的item传给父组件
// 发射出去一个事件 父组件负责接收这个事件 这里的事件是自定义事件
this.$emit('btn-click', item)
}
},
3.既然我们将这个对象发射出去了,那我们发射给谁?是不是父组件?是的;那我们现在就需要让父组件接收这个自定义事件;然后发射出去的这个对象,我们再让父组件做相应的操作,所以我们调用了一个cpnclick函数
<div class="bigbox">
<!-- 将注册好的子组件使用起来 -->
<!-- 这里接收子组件点击事件 父组件要做对应的事情 -->
<!-- 这里系统会自动帮我们传过去一个item -->
<cpn v-on:btn-click="cpnclick"></cpn>
</div>
4.既然调用了cpnclick函数,那我们就需要封装这个函数,在哪里封装?我们想让父组件得到这个对象,实现某个功能,那么我们就需要再父组件里封装这个函数
const app = new Vue({
el: '.bigbox',
data: {
},
components: {
cpn
},
methods: {
cpnclick(item) {
console.log('我是父组件里封装的函数', item);
}
}
})
这里我们就已经实现了子传父这个操作
组件通信总结:
父传子
1.父传子就是使用props这个内置对象来帮我们接收父组件传过来的信息
2.子组件接收这个信息时要限定类型,默认值,
子传父
1.子传父就是使用$emit( ' 自定义事件名 ',对象 )发射出去被点击的那个子组件里的对象
2.父组件要来接收这个自定义对象,并且封装一个函数实现某种功能
更多推荐
所有评论(0)