vue组件通信

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>