组件交互

一、父组件向子组件传值

step: 1. 给父组件绑定自定义属性, 2. 子组件通过props接收传递的值。

父组件中:

<template>
  <div>
    <v-child  :msg='msg'></v-child>
  </div>
</template>

子组件中:

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

export default {
  props:['msg'],
};

传值情况:

1. 父组件的值改变时会改变子组件的值,直接传基本数据类型;

2. 子组件的值改变时会改变父组件的值,但是报错,子组件拿到父组件的值,通过mounted函数转换为自己的数据;

3. 父组件和子组件改变都引起值的改变,传json对象,因为传递的是地址值,所以父子组件指向的地址一致。

 

 

二、子组件向父组件传值

step: 1. 在子组件中定义触发事件的方法,2. 在方法中通过 this.$emit()触发和传值,3. 在父组件中接收该方法并存到自己的方法中。

子组件中:

<template>
  <div>
    <button @click="send">传给父组件</button>
  </div>
</template>
<script>
 export default {
   data () {
      return {
        msg:'子组件的数据'
      }
    },
   methods:{
    send(){
      this.$emit('giveTo',this.msg);
      }
    },
  }
</script>

父组件中:

<template>
  <div>
    <v-child  @giveTo='own' ></v-child>

    {{ fromSon }}
  </div>
</template>
<script>
 export default {

  data () {
    return {
      fromSon: ''
     }
    },
  methods:{
    own( val ){
      this.fromSon = val ;
      }
    },
  }
</script>

 

 

三、非父子传值

step: 1. 单独的事件中心管理组件间的通信,在vue的原型上增加一个自定义属性Event (vue实例),

    2. 监听事件:$on('事件名',回调函数)接收数据 与销毁事件$off,

    3. 触发事件:$emit('方法名',发送的数据) 发送数据 。

在main.js中: 

Vue.prototype.Event = new Vue()
组件one中:

<template>
  <div> 

    这是one的数据{{msg}}

    <button @click="sendTwo">点击发送给TWO</button>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg:'我是one里面的数据'
      }
    },
    methods:{
      sendTwo(){
        // $emit 用来发送数据给其他组件
        this.Event.$emit('twoSend',this.msg)
      }
    }
</script>

组件two中:<template>

  <div>
    我是从one拿到的数据------{{twoData}}
  </div>
</template>
<script>
  export default {
    data () {
      return {
        twoData:'aaa'
      }
    },
  mounted(){
    // $on 用来接收one组件传递来的数据
    this.Event.$on('twoSend',(e)=>{
      this.twoData = e
    })
  }
}
</script>

 

 

四、is 在不同组件之间进行动态切换

1. 解决固定搭配

父组件:

<template>
   <div>
      <ul>
         <li is='vOne'></li>
      </ul>
  <div>
</template>
<script>
import vOne from "./one";
export default {
  components: {
      vOne
  },
};
<script>
2. 动态组件
父组件:
<template>
  <div>
    <button @click="name='vOne'">one</button>
    <button @click="name='vTwo'">two</button>
    <div :is='name'></div>
  </div>
</template>
<script>
import vOne from "./one";
import vTwo from "./two";
export default {
  components: {
      vOne,
      vTwo
  },
  data() {
    return {
        name: 'vOne'
    };
  }
};
</script>
 
 
五、slot 组件插槽
1. 无名插槽
slot.vue中:

<template>
  <div>
    <v-one>我是one内容</v-one>
  </div>
</template>

one.vue中:

<template>
  <div>
    <slot></slot>
    one组件
    <slot></slot>
  </div>
</template>

2. 具名插槽

slot.vue中:

<template>
<div>
  <v-two>
    <div slot='aa'>aaaaaa</div>
    <div slot='bb'>bbbbbb</div>
    <div slot='cc'>cccccc</div>
    <div slot='dd'>dddddd</div>
  </v-two>
</div>
</template>

two.vue中:

<template>
  <div>
    <slot name="aa"></slot>
    <slot name="bb"></slot>
    two组件
    <slot name="cc"></slot>
    <slot name="dd"></slot>
  </div>
</template>

 

 

六、ref 注册组件引用信息,用原生的方法进行父子组件间的传值

子组件中:

<script>
export default {
  methods: {
    alert() {
      console.log(123);
    }
  },
};
</script>
父组件中:通过 this.$refs获取组件的相关信息
<template>
  <div>
      <v-one ref="alertOne"></v-one>
  </div>
</template>
<script>
 import vOne from './one'
 export default {
    components: {
       vOne
    },
    data() {
        return {
          msg: 'abc'
        };
    },
    mounted(){
        console.log(this.$refs);
        console.log(this.$refs.alertOne.alert());
    }
};
</script>
 
 
七、jquery
step: 1. 全局安装npm install jquery --save
    2. import引入jquery
    3. 用mounted方法直接调用
 
<template>
  <div>
      <button>点击淡出</button>
      <div class="box"></div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  mounted() {
      this.$('button').click(() => {
          this.$('.box').fadeOut();
      })
  }
};
</script>
posted @ 2020-11-03 21:00  ss_shen  阅读(176)  评论(0)    收藏  举报