记录：262

体验Vue.component注册全局组件，components注册局部组件，父组件向子组件传值，子组件向父组件传值，同级组件之间传递值。

本例环境：

jQuery：3.6.0；Vue：2.6.0

1.体验Vue.component注册全局组件

全局组件使用Vue.component注册。组件重复使用，不冲突。

1.1HTML标签

<div id="app">
 <div><strong>开始体验Vue.component</strong></div>
 <div style="color: blue;">体验Vue.component全局API</div>
 <button-city></button-city>
 <button-city></button-city>
</div>

1.2组件代码

Vue.component('button-city',{
 data:function(){
  return {
    cityInfo:''
  }
 },
 template: `
 <div>
  <button @click="handleCity">点击</button>
  <div><span>城市: </span>{{cityInfo}}</div>
 </div>
 `,
 methods:{
  handleCity:function(){
   if( this.cityInfo==''){
     this.cityInfo = '杭州';
   }else{
     this.cityInfo=''
   }
  }
 }
});

1.3对应Vue代码

var vm = new Vue({
  el: '#app',
  data: {
  },
 });

1.4效果

运行效果如下：

2.体验components注册局部组件

局部组件使用components注册。

2.1HTML标签

<div id="app">
 <div><strong>开始体验components</strong></div>
 <div style="color: blue;">体验components局部组件</div>
 <div style="color: orange;">country-info组件</div>
 <country-info></country-info>
 <div style="color: orange;">province-info组件</div>
 <province-info></province-info>
 <div style="color: orange;">city-info组件</div>
 <city-info></city-info>
</div>

2.2组件代码

var countryInfo = {
  data: function () {
    return {
      country: ''
    }
  },
  template: `
      <div>
        <button @click="handleCountry">点击</button>
        <div><span>国: </span>{{country}}</div>
      </div>
      `,
  methods: {
    handleCountry: function () {
      this.country = '中国,是一个美丽国家.';
    }
  }
};
var provinceInfo = {
  data: function () {
    return {
      province: ''
    }
  },
  template: `
      <div>
        <button @click="handleProvince">点击</button>
        <div><span>省: </span>{{province}}</div>
      </div>
      `,
  methods: {
    handleProvince: function () {
      this.province = '浙江,是一个经济发达地区.'
    }
  }
};
var cityInfo = {
  data: function () {
    return {
      cityInfo: ''
    }
  },
  template: `
      <div>
        <button @click="handleCity">点击</button>
        <div><span>市: </span>{{cityInfo}}</div>
      </div>
      `,
  methods: {
    handleCity: function () {
      this.cityInfo = '杭州,是一个互联网发达城市.';
    }
  }
};

2.3对应Vue代码

var vm = new Vue({
  el: '#app',
  data: {
    
  },
  components: {
   'hello-world': HelloWorld,
   'hello-tom': HelloTom,
   'hello-jerry': HelloJerry
  }
});

2.4效果

运行效果如下：

3.体验Vue.component父组件向子组件传值

父组件向子组件传递值，使用props属性。

3.1HTML标签

<div id="app">
 <div><strong>开始体验组件间传值(全局组件)</strong></div>
 <div style="color: blue;">父组件向子组件传值(使用props)</div>
<component-info :country='countryInfo' :province='provinceInfo' :girl='girlInfo'></component-info>
</div>

3.2组件代码

Vue.component('component-info',{
 props:['country','province','girl'],
 template:`
 <div>
 <div style="color: orange;">国:</div>
 <div>{{country}}</div>
 <div style="color: orange;">华东各省:</div>
 <div :key='index' v-for='(item,index) in province'>{{item}}</div>
 <div  style="color: orange;">美女信息:</div>
 <div>罩杯: {{girl.cup}} ,身高: {{girl.height}}</div>
 </div>
 `
});

3.3对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
 countryInfo:'中国是一个宜居国家.',
 provinceInfo:['上海','浙江','福建','江苏'],
 girlInfo:{
     cup:'D',
     height: 160
 }
 }
});

3.4效果

运行效果如下：

4.体验Vue.component子组件向父组件传值

子组件向父组件传值，使用$emit触发事件，使用$event接收事件。

4.1HTML标签

<div id="app">
 <div><strong>开始体验组件间传值(全局组件)</strong></div>
 <div style="color: blue;">子组件向父组件传值(使用props)</div>
 <sub-to-main :province='provinceInfo' @change-city='handleCity' @check-height='handleHeight($event)'></sub-to-main>
 <div>城市: {{cityInfo}}</div>
 <div>身高: {{height}}</div>
</div>

4.2组件代码

Vue.component('sub-to-main', {
  props: ['province'],
  template: `
<div>
<div style="color: orange;">华东各省:</div>
<div :key='index' v-for='(item,index) in province'>{{item}}</div>
 <div><span>切换城市: </span>
  <button @click='$emit("change-city")'>切换</button>
</div>
<div><span>校验高度: </span>
  <button @click='$emit("check-height",2)'>校验</button>
</div>
</div>
  `
});

4.3对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
   provinceInfo: ['上海', '浙江', '福建', '江苏'],
   cityInfo: '上海',
   height: 160
 },
 methods: {
 handleCity: function () {
  if (this.cityInfo == '上海') {
    this.cityInfo = '杭州';
  } else {
    this.cityInfo = '上海'
  }
   },
   handleHeight: function (value) {
     this.height += value;
   }
 }
});

4.4效果

运行效果如下：

5.体验Vue.component同级组件之间传递值

体验Vue.component注册的局部组件，同级组件之间传递值，使用vm.$emit触发事件，使用vm.$on监听事件，需要创建一个全局的var vm= new Vue()。

5.1HTML标签

<div id="app">
  <div><strong>开始体验组件间传值(全局组件)</strong></div>
  <div style="color: blue;">同级组件之间传递值(vm.$emit触发,vm.$on监听)</div>
  <div style="color: orange;">体验girl-component组件</div>
  <girl-component></girl-component>
  <div style="color: orange;">体验boy-component组件</div>
  <boy-component></boy-component>
  <div style="color: orange;">关闭组件之间传递通道</div>
  <div><button @click="stopSendEvent">关闭</button> <span style="color: red;">{{stopInfo}}</span></div>
</div>

5.2组件代码

var messageHub = new Vue();
Vue.component('girl-component', {
  data: function () {
    return {
      sendInfo: "请继续努力,共同进步.",
      receiveInfo: ''
    }
  },
  template: `
  <div>
  <div>
  <span>向boy-component组件发送信息</span>
  <button @click='handleInfo'>点击发送</button>
  </div>
  <div>接收boy-component组件信息:  <span style="color: red;">{{receiveInfo}}</span></div>
  </div>
  `,
  methods: {
    handleInfo: function () {
      messageHub.$emit('to-boy-event', this.sendInfo);
    }
  },
  mounted: function () {
    messageHub.$on('to-girl-event', (value) => {
      this.receiveInfo = value;
    });
  }
});

Vue.component('boy-component', {
  data: function () {
    return {
      sendInfo: '共同学习,共同进步.',
      receiveInfo: ''
    }
  },
  template: `
  <div>
  <div>
    <span>向girl-component组件发送信息</span>
    <button @click='handleInfo'>点击发送</button>
    </div>
  <div>接收girl-component组件信息:  <span style="color: red;">{{receiveInfo}}</span></div>
  </div>
  `,
  methods: {
    handleInfo: function () {
      messageHub.$emit('to-girl-event', this.sendInfo);
    }
  },
  mounted: function () {
    messageHub.$on('to-boy-event', (value) => {
      this.receiveInfo = value;
    });
  }
});

5.3对应Vue代码

var vm = new Vue({
  el: '#app',
  data: {
    stopInfo: '组件信息传递通道已开启.'
  },
  methods: {
    stopSendEvent: function () {
      messageHub.$off('to-boy-event');
      messageHub.$off('to-girl-event');
      this.stopInfo = '组件信息传递通道已关闭';
    }
  }
});

5.4效果

运行效果如下：

6.体验components同级组件之间传递值

体验components注册的局部组件，同级组件之间传递值，使用vm.$emit触发事件，使用vm.$on监听事件，需要创建一个全局的var vm= new Vue()。

6.1HTML标签

<div id="app">
 <div><strong>开始体验组件间传值(局部组件)</strong></div>
 <div style="color: blue;">同级组件之间传递值(vm.$emit触发,vm.$on监听)</div>
 <div style="color: orange;">体验girl-component组件</div>
 <girl-component></girl-component>
 <div style="color: orange;">体验boy-component组件</div>
 <boy-component></boy-component>
 <div style="color: orange;">关闭组件之间传递通道</div>
 <div><button @click="stopSendEvent">关闭</button> <span style="color: red;">{{stopInfo}}</span></div>
</div>

6.2组件代码

var messageHub = new Vue();
var girlComponent = {
  data: function () {
    return {
      sendInfo: "请继续努力,共同进步.",
      receiveInfo: ''
    }
  },
  template: `
  <div>
  <div>
  <span>向boy-component组件发送信息</span>
  <button @click='handleInfo'>点击发送</button>
  </div>
  <div>接收boy-component组件信息:  <span style="color: red;">{{receiveInfo}}</span></div>
  </div>
  `,
  methods: {
    handleInfo: function () {
      messageHub.$emit('to-boy-event', this.sendInfo);
    }
  },
  mounted: function () {
    messageHub.$on('to-girl-event', (value) => {
      this.receiveInfo = value;
    });
  }
};

var boyComponent = {
  data: function () {
    return {
      sendInfo: '共同学习,共同进步.',
      receiveInfo: ''
    }
  },
  template: `
  <div>
  <div>
    <span>向girl-component组件发送信息</span>
    <button @click='handleInfo'>点击发送</button>
    </div>
  <div>接收girl-component组件信息:  <span style="color: red;">{{receiveInfo}}</span></div>
  </div>
  `,
  methods: {
    handleInfo: function () {
      messageHub.$emit('to-girl-event', this.sendInfo);
    }
  },
  mounted: function () {
    messageHub.$on('to-boy-event', (value) => {
      this.receiveInfo = value;
    });
  }
};

6.3对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
   stopInfo: '组件信息传递通道已开启.'
 },
 methods: {
   stopSendEvent: function () {
     messageHub.$off('to-boy-event');
     messageHub.$off('to-girl-event');
     this.stopInfo = '组件信息传递通道已关闭';
   }
 },
 components: {
   'girl-component': girlComponent,
   'boy-component': boyComponent,
 }
});

6.4效果

运行效果如下：

 以上，感谢。

2021年9月15日