组件交互

一、父组件向子组件传值

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>