vue组件通信

最新推荐文章于 2023-08-17 21:59:26 发布

皮卡丘

最新推荐文章于 2023-08-17 21:59:26 发布

阅读量82

点赞数

分类专栏：前端开发文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44680639/article/details/122864086

版权

前端开发专栏收录该内容

36 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue.js中组件间的通信方式，包括使用props从父组件向子组件传递数据，以及子组件通过$emit触发自定义事件向父组件传递信息。通过实例展示了如何定义prop的类型、验证及默认值，以及如何监听并响应子组件的事件。

摘要由CSDN通过智能技术生成

1.props: 在子组件中绑定:键="值"、在子组件中写props:["键"]、在子组件中写{{ 键 }}显示

<div id="root">
  <mytag :a="1" :b="2" :c="{uname:'张三',sex:'男'}" :d="100"></mytag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('mytag', {
    // props: ['a', 'b'],   props:[属性名]
    props: {  // 限制类型      
      a: Number,
      b: Number,
      c: Object,
      d: {
        type: Number,     //数据类型
        required: false,  //必须
        default: 666,     //默认值  发现：有了默认值 没传递也报错  所以默认值和必须同时存在必须无意义
        validator(data) {  
          return data > 99
        }
      }
    },
    template: `<fieldset>        
         {{a}}  <br/>
         {{b}} <br/>
         {{c}} <br/>
         {{d}} <br/>
    </fieldset>`
  })
  const vm = new Vue({
    el: '#root',
    data: {}
  })
</script>

2.$emit

公共组件 index.js文件：

Vue.component('navbar', {       
  props: {
    title: String
  },
  template: `<header>
    <span @click="bacnFn">返回</span>
    <span>{{title}}</span>
    <span @click="searchFn">搜索框🔍</span>
  </header>`,
  methods: {
    bacnFn() {
      // 语法：this.$emit("自定义事件名称", 数据,....,数据)
      this.$emit('click-left')
    },
    searchFn() {
      alert('搜索首页数据')
    }
  }
})

首页页面 index.html:

<link rel="stylesheet" href="./qfui.css" />
<div id="root">
  <navbar @click-left="alert('首页点击返回了')" title="首页"></navbar>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {},
    methods: {}
  })
</script>

列表页面 list.html:

<link rel="stylesheet" href="./qfui.css" />
<div id="root">
  <navbar @click-left="alert('列表点击返回了')" title="列表"></navbar>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {},
    methods: {}
  })
</script>