Vue注册组件语法糖、事件修饰符，组建模块的抽离两种写法、父子组件通信

最新推荐文章于 2022-12-12 20:08:13 发布

MDR_0820

最新推荐文章于 2022-12-12 20:08:13 发布

阅读量277

点赞数

分类专栏： JavaScript ES6 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/MDR_0820/article/details/121315163

版权

本文详细介绍了Vue中组件的注册语法糖、组件模块的两种抽离方法，强调了组件数据必须通过函数避免数据共享。还讨论了父子组件间的通信，包括子传父的自定义事件。此外，探讨了事件修饰符的使用，如.stop、.prevent、.capture等，并提及了Vue 2.1.4和2.3.0版本新增的事件修饰符功能。

摘要由CSDN通过智能技术生成

Vue注册组件语法糖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>

    <script src="js/vue.js"></script>
    <script>
        // 注册组件  全局组件 语法糖
        Vue.component('cpn1', {
   
            template: `
            <div>
                <h2> 1.全局注册组件语法糖 </h2>
                <p> 1.1 内容</p>
            </div>
            `
        });

        const app = new Vue({
   
            el: '#app',
            data: {
   
                message: 'Hellow '
            },
            // 局部组件语法糖 在实例 里面创建
            components: {
   
                'cpn2': {
   
                    template: `
                    <div>
                       <h3> 2.局部注册组件语法糖 </h3>
                       <p> 2.1 内容</p>
                   </div>
                   `
                }
            }

        })
    </script>
</body>

</html>

组件模块的抽离写法

Vue 提供了两种方案来定义HTML 模块内容：

使用 < script > 标签
使用< template > 标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>

        <cpn1></cpn1>
        <cpn1></cpn1>

    </div>
    <!-- 1 组件分离.script 标签 类型必须是是 text/x-template -->
    <script type="text/x-template" id="cpn">

        <div>
            <h2> script 标签组件分离 cpn</h2>
            <p>组件分离cpn <