vue 通过下拉框 组件 了解 Vue 中父子组件通讯,本文主要通过写一些 vue 组件的小例子,然后认识到 vue 中的一些知识,让大家都学会 vue 框架的使用。
了解父子组件的通信,使 vue 组件化开发的第一步,所以这点很重要,希望这篇文章能后帮助你了解到父子组件中是如何通信的
- <script>
- import oSelect from "@/components/select.vue";
- export
- default {
- name:
- 'App',
- data() {
- return {
- selectData: {
- defaultIndex: 0,
- //默认显示索引值
- selectStatus: false,
- //下拉框是否出现
- selectOptions: [ //下拉框中的数据
- {
- name: 'time',
- context: '按时间排序'
- },
- {
- name: 'view',
- context: '按浏览量排序'
- },
- {
- name: 'like',
- context: '按点赞数排序'
- },
- {
- name: 'reply',
- context: '按回复数排序'
- },
- {
- name: 'reward',
- context: '按打赏数排序'
- }]
- }
- }
- },
- methods: {
- onChangeOption(index) {
- /**此处的形参,就是子组件传过来的参数**/
- this.selectData.defaultIndex = index;
- //通过默认索引的改变,来改变选择的数据
- }
- },
- components: {
- oSelect
- }
- }
- </script>
- <script>
- > export
- default {
- name:
- 'oSelect',
- props: { // 子组件接收父组件传过来的值,使用props
- selectData: {
- type: Object //传过来的必须是对象
- }
- },
- methods: {
- EmitchangeOption(index) {
- this.$emit('changeOption', index);
- //changeOption为父组件中绑定的属性名字,一定要一致
- //改变选择的索引之后,传递个父组件
- //记住,子组件传数据给父组件使用 $emit
- },
- changeStatus() {
- this.selectData.selectStatus = !this.selectData.selectStatus
- //取反,来改变当前this.selectData的值
- }
- }
- }
- </script>
- .select-box{
- position: relative;
- max-width: 250px;
- line-height: 35px;
- margin: 50px auto;
- }
- .select-title{
- position: relative;
- padding: 0 30px 0 10px;
- border: 1px solid #d8dce5;
- border-radius: 5px;
- transition-duration: 300ms;
- cursor: pointer;
- }
- .select-title:after{
- content: '';
- position: absolute;
- height: 0;
- width: 0;
- border-top: 6px solid #d8dce5;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- right: 9px;
- top: 0;
- bottom: 0;
- margin: auto;
- transition-duration: 300ms;
- transition-timing-function: ease-in-out;
- }
- .select-title-active{
- border-color: #409eff;
- }
- .select-title-active:after{
- transform: rotate(-180deg);
- border-top-color: #409eff;
- }
- .select-options{
- position: absolute;
- padding:10px 0;
- top: 45px;
- border:1px solid #d8dce5;
- width: 100%;
- border-radius: 5px;
- }
- .select-option-item{
- padding:0 10px;
- cursor: pointer;
- transition-duration: 300ms;
- }
- .select-option-item:hover,.select-option-active{
- background: #f1f1f1;
- color: #409eff;
- }
- .arrow-top{
- position: absolute;
- height: 0;
- width: 0;
- top: -7px;
- border-bottom: 7px solid #d8dce5;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- left: 0;
- right: 0;
- margin: auto;
- z-index: 99;
- }
- .arrow-top:after{
- content: '';
- position: absolute;
- display: block;
- height: 0;
- width: 0;
- border-bottom: 6px solid #fff;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- left: -6px;
- top: 1px;
- z-index: 99;
- }
- .slide-down-enter-active,.slide-down-leave{
- transition: all .3s ease-in-out;
- transform-origin:0 top;
- transform: scaleY(1);
- }
- .slide-down-enter{
- transform: scaleY(0);
- }
- .slide-down-leave-active{
- transition: all .3s ease-in-out;
- transform-origin:0 top;
- transform: scaleY(0);
- }
其实使用 vue 这类 mvvm 框架主要的思想,就是忘记 DOM 的存在,一切都是数据的交互。
来源: https://www.2cto.com/kf/201712/703248.html