Vue2的16种传参通信方式总结和示例讲解

目录

• 前言
• 一、props(父传子)
• 二、$emit与v-on (子传父)
• 三、EventBus (兄弟传参)
• 四、.sync与update: (父子双向)
• 五、v-model (父子双向)
• 六、ref
• 七、$children与$parent
• 八、$attrs与$listeners (爷孙双向)
• $attrs使用流程代码：
• $listeners使用流程代码：
• 九、provide与inject (多层传参)
• 十、Vuex (全局)
• 十一、Vue.prototype (全局)
• 十二、浏览器缓存
• 十三、window (全局)
• 十四、路由
• 十五、$root (顶层)
• 十六、slot（父传子）
• （1）具名插槽用法
• （2）无参数传递的默认插槽
• 总结

<template>
  <div>
    <child  :message="message" />
  </div>
</template>

<script>
import child  from './child .vue';
export default {
  components: {
    child 
  },
  data() {
    return {
      message: '这是父组件传过去的'
    };
  }
};
</script>

<template>
  <div>
    <p>接收到的消息: {{ message }}</p>
  </div>
</template>

<script>
  export default {
    //props:['message'],
    props: {
      message: {
        type: String,
        default: '', // 这里能设置默认值，如果父组件没有传参，默认值会生效
      },
    },
    mounted() {
      console.log(this.message);
    },
  };
</script>

<template>
  <div>
    <button @click="sendParent">点击发送数据给父组件</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendParent() {
        this.$emit('my-event', '这是传递的参数');
      },
    },
  };
</script>

<template>
  <div>
    <child v-on:my-event="childEvent" />
    // 或者用@简写代替v-on
    <child @my-event="childEvent" />
  </div>
</template>

<script>
  import child from './child.vue';
  export default {
    components: {
      child,
    },
    methods: {
      childEvent(item) {
        console.log('接收到子组件的传参:', item);
      },
    },
  };
</script>

import Vue from 'vue';

const Bus = new Vue();

Vue.prototype.$Bus = Bus;

<template>
  <div>
    <button @click="sendSibling">点击发送内容给兄弟组件</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendSibling() {
        this.$Bus.$emit('my-event', '参数');
      },
    },
  };
</script>

<template>
  <div> 我是兄弟组件B </div>
</template>

<script>
  export default {
    created() {
      this.$Bus.$on('my-event', this.handleMessage);
    },
    beforeDestroy() {
      this.$Bus.$off('my-event', this.handleMessage);
    },
    methods: {
      handleMessage(message) {
        console.log('来自兄弟的参数:', message);
      },
    },
  };
</script>

import Vue from "vue"

export default new Vue()

<template>
  <div>
    <button @click="sendSibling">点击发送内容给兄弟组件</button>
  </div>
</template>

<script>
  import Bus from './Bus.js';
  export default {
    methods: {
      sendSibling() {
        Bus.$emit('my-event', '参数');
      },
    },
  };
</script>

<template>
  <div> 我是兄弟组件B </div>
</template>

<script>
  import Bus from './Bus.js';
  export default {
    created() {
      Bus.$on('my-event', this.handleMessage);
    },
    beforeDestroy() {
      Bus.$off('my-event', this.handleMessage);
    },
    methods: {
      handleMessage(message) {
        console.log('来自兄弟的参数:', message);
      },
    },
  };
</script>

<template>
  <div>
    <chile :myprop.sync="myData" />
  </div>
</template>

<script>
import chile from './chile.vue';

export default {
  components: {
    chile
  },
  data() {
    return {
      myData: '父组件数据'
    };
  }
};
</script>

<template>
  <div>
    <button @click="updateData">点击子修改父传过来的数据</button>
  </div>
</template>

<script>
  export default {
    props: {
      myprop: String,
    },
    methods: {
      updateData() {
        this.$emit('update:myprop', 新内容);
      },
    },
  };
</script>

<template>
  <div>
    <child v-model="myData" />
  </div>
</template>

<script>
import child from './child.vue';

export default {
  components: {
    child
  },
  data() {
    return {
      myData: '天天鸭'
    };
  }
};
</script>

<template>
  <div>
    <input :value="childData" @input="handleChange" />
  </div>
</template>

<script>
export default {
  model: {
    prop: 'myProp',
    event: 'input'
  },
  props: {
    myProp: String
  },
  data() {
    return {
      childData: this.myProp
    };
  },
  methods: {
    handleChange(event) {
      this.childData = event.target.value;
      this.$emit('input', this.childData);
    }
  }
};
</script>

<template>
  <div>
    <child ref="refChild" />
  </div>
</template>

<script>
  import child from './child.vue';
  export default {
    components: {
      child,
    },
    mounted() {
      let childObj = this.$refs.refChild;
      console.log(childObj.name); // 直接获取到子组件的属性内容 打印出来：天天鸭
      childObj.childMethod('参数'); // 触发子组件的方法
    },
  };
</script>

<template>
  <div></div>
</template>

<script>
  export default {
    data() {
      return {
        name: '天天鸭',
      };
    },
    methods: {
      childMethod(val) {
        console.log(val);
      },
    },
  };
</script>

<template>
  <div>
    <child />
    <button @click="getChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
  import child from './child.vue';
  export default {
    components: {
      child,
    },
    methods: {
      getChildMethod() {
       // 判空，然后用下标获取
        if (this.$children.length > 0) {
          this.$children[0].childMethod();  // 使用子组件方法
          this.$children[0].name;    // 使用子组件属性
        }
      },
    },
  };
</script>

<template>
  <div></div>
</template>

<script>
  export default {
    mounted(){
        this.$parent.parMethod()
        this.$parent.name
    }
  };
</script>

<GrandParent :name=name></GrandParent>

<Parent v-bind="$attrs"></Parent>

<template>
  <div> 爷组件传来的：{{ name }} </div>
</template>
<script>
  export default {
    props: {
      name: {
        default: String,
      },
    },
  };
</script>

<template>
  <div>
    <el-button @click="update">点击孙传爷</el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      update() {
        this.$emit('my-event', '孙传给爷的数据');
      },
    },
  };
</script>

<Parent v-bind="$listeners"></Parent>

<template>
  <div>
    <Parent @my-event="getMyEvent" />
  </div>
</template>

<script>
  import Parent from './Parent.vue';
  export default {
    components: {
      Parent,
    },
    methods: {
      getMyEvent(val) {
        console.log('爷组件接收到的数据:', val);
      },
    },
  };
</script>

<template>
  <div> </div>
</template>

<script>
  export default {
    provide() {
      return {
        name: '天天鸭',
        age: this.age,
        myMethod: this.myMethod,
      };
    },
    data() {
      return {
        age: '18',
      };
    },
    methods: {
      myMethod(data) {
        console.log('收到来自某个孙子的数据:', data);
      },
    },
  };
</script>

<template>
  <div>
    <el-button @click="myMethod('我是孙子组件')">我是孙子组件</el-button>
    这是顶层传下来的参数： {{ name }}
  </div>
</template>

<script>
  export default {
    inject: ['name', 'age', 'myMethod'],
    methods: {
      myMethod(data) {
        this.myMethod(data); // 传参给顶层祖先组件
      },
    },
  };
</script>

Vue.prototype.$testName = '天天鸭';

Vue.prototype.$testMethod = function(val) {
  console.log(val);
};

this.$appName;

this.$testMethod('参数');

// 存储
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

// 获取
let valueFromSessionStorage = sessionStorage.getItem('key');
let valueFromLocalStorage = localStorage.getItem('key');

// 删除
sessionStorage.removeItem('key');
localStorage.removeItem('key');

// 清空所有
sessionStorage.clear();
localStorage.clear();

window.Obj = { test: '挂载对象' }
window.name = '天天鸭'

console.log( window.Obj); 
console.log( window.name);

this.$router.push({name:"index", params:{id}})

this.$route.params.id

this.$router.push({ name:"index", query:{id}})

this.$router.push({ path:"/index", query:{id}}) 

this.$router.push('/index?name='+obj.name+'&age='+obj.age)

this.$route.query.id

{ 
  path: '/about/:name/:age' ,  
  name: 'About', 
  component() => import('@/views/About.vue') 
}

this.$router.push('/about/'+obj.name+'/'+obj.age)

this.$route.params

import App from './App.vue';
import Vue from 'vue';

new Vue({
  el: '#app',
  render: h => h(App),
  data: {
    globalName: '天天鸭'
  }
});

<template>
  <div>
    {{ globalName }}
  </div>
</template>

<script>
export default {
  mounted() {
    this.$root.globalName = '修改数据';
  },
};
</script>

<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

<script>
export default {
};
</script>

<template>
  <div>
    <child>
        <template v-slot:header>
          <h1>这是插槽的内容</h1>
        </template>
    </child>
  </div>
</template>

<script>
import child from './child.vue';

export default {
  components: {
    child
  }
};
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
};
</script>

<template>
  <div>
    <child>
      <p>默认插槽中的内容。</p>
    </child>
  </div>
</template>

<script>
import child from './child.vue';

export default {
  components: {
    child
  }
};
</script>