vue绑定事件

事件函数的编写需要在 export default{} 中的 setup() 函数中例如：

setup(props) {
    let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);

    const follow = () => {
        console.log("follow");
    }

    const unFollow = () => {
        console.log("unfollow");
    }

    return {
        fullname,
        follow,
        unFollow,
    }
}

注意，写的函数要return出去才可以使用

使用样例：

<button v-on:click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">follow</button>
<button v-on:click="unFollow" v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">un-follow</button>

使用 v-on:click 绑定事件函数，其中 v-on: 可以简写为 @ 例如：

<button @click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">follow</button>
<button @click="unFollow" v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">un-follow</button>

触发父组件的函数：
使用 context.emit() ，例如：

setup(props, context) {
    let fullName = computed(() => props.user.lastName + ' ' + props.user.firstName);

    const follow = () => {
        context.emit('follow');
    };

    const unfollow = () => {
        context.emit("unfollow");
    }

    return {
        fullName,
        follow,
        unfollow,
    }
}

和上一个 setup 相比，这里需要传一个上下文 context 然后使用 context.emit 来绑定
注意：这里的props和context是由位置决定的，不是由名字决定的，所以假如在没有用到props时，想绑定事件，也依旧要传一个props。

父组件中template：

<UserProfileInfo @follow="handlefollow" @unFollow="handleunFollow" :user="user"/>

context.emit 绑定的事件名称就是 @ 后面的名称，所以只要一一对应就行，也可以不和函数名称相同。 = 后面的就是触发的函数。这些被触发的函数同样写在 setup 中，也同样需要被return出去，例如：

setup() {
    const user = reactive({
        id: 1,
        username: "heky",
        lastName: "he",
        firstName: "ky",
        followerCount: 999,
        is_followed: false,
    });

    const handlefollow = () => {
        console.log("u");
    };

    const handleunFollow = () => {
        console.log("u")
    }

    return {
        user,
        handlefollow,
        unFollow,
    }
}

假如有传递参数，就在 context.emit() 再多传一个参数
例如：

const post_a_post = () => {
    context.emit('post_a_post', content.value);
    content.value = "";
}

而对应的触发事件需要加一个传入的形参,
例如：

const post_a_post = (content) => {
    posts.count ++;
    posts.posts.unshift({
        id: post_a_post.count,
        user_id: 1,
        content: content,
    })
}