Vue2 props $emit ref 的使用方式

props ，$emit , ref 传值的使用方式

• 1. props 和 $emit 的使用

	<template>
    <div class="other">
        <h1>这是 子组件 页面 </h1>
        <h3>{{ msg }}</h3>
        <button @click="sendPar">传父组件值</button>
          <button @click="sendPar">传父组件值</button>
        <br> <br><br>
        <span> {{ num }}</span>
    </div>
</template>
<script>
export default {
    name: 'Other',
    components: {},
    props: ["msg"],
    data() {
        return {
            num: 0
        }
    },
    methods: {
        sendPar() {
            this.$emit("sendPar", "我是other子组件过来的")
        },
        // 子组件定义事件 添加
        add() {
            this.num++
        },
        // 子组件定义事件 减少
        subtract() { this.num--}
    }
};
</script>

• 2. refs 和 $emit（sendPar）的使用

<template>
    <div class="about">
        <h1>这是 父组件 页面</h1>
        <other_page :msg='msg' @sendPar="sendPar" ref="other"></other_page>
        <button @click="add">加</button> &nbsp;&nbsp;&nbsp;&nbsp; <button @click="subtract">减</button>
    </div>
</template>

<script>
import other_page from '../Other/index'
export default {
    name: "About",
    components: {other_page},
    data() {
        return {
            msg: "我是父组件 about 里的数据"
        }
    },
    methods: {
        sendPar(val) {
            this.msg = val
        },
        // 在父组件中 使用 ref 调用 子组件 添加事件
        add() {
            this.$refs.other.add()
        },
        subtract() {
            this.$refs.other.subtract()
        }
    }
}
</script>

• 3. $emit 的 sync 的使用方式

<!-- 子组件 -->
<template>
    <div>
        <el-button @click="updateData">子组件</el-button>
    </div>
</template>
<script>
export default {
    methods: {
        updateData() {
            const data = new Date().getFullYear();
            this.$emit('update:dataVal', data);
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div>
        <updateDemo :dataVal.sync="message" />
        <p>{{ message }}</p>
        <el-input v-model="message"></el-input>
    </div>
</template>

<script>
import updateDemo from '../common/update.demo.vue';
export default {
    components: {
        updateDemo
    },
    data() {
        return {
            message: '测试数据'
        };
    },
}