vue中关于$emit的用法子控件与父控件（二）

原创

mp624183768 2023-03-14 09:21:18 ©著作权

文章标签 ci 数据 html 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者mp624183768的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue中关于$emit的用法子控件与父控件（二）_ci

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

例如：子组件：

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

父组件：

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

图一：点击之前的数据

vue中关于$emit的用法子控件与父控件（二）_html_02

图二：点击之后的数据

vue中关于$emit的用法子控件与父控件（二）_html_03

再来一个完整的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
<div id="app">
    <p>Parent:{{message}} <input type="text" v-model="message"></p>
    <hr>
    <p>Child:
        <my-component :parent-message="message"></my-component>
    </p>


</div>
<script>
    Vue.component('my-component', {
        template: '    <span>{{parentMessage}}\n' +
        '    <input type="text" v-model="message">\n' +
        '        <button @click="updateText">Update</button>\n' +
        '    </span>',
        props: {'parentMessage': String},
        data() {
            return {
                message: this.parentMessage
            }
        },
        methods: {
            updateText() {
                this.$parent.$emit('update', this.message);
            }
        }
    });
    //
    new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        methods: {
            selfUpdate(val) {
                this.message=val;
            }
        },
        mounted(){
            this.$on('update',this.selfUpdate);
        }
    });
</script>
</body>
</html>