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

最新推荐文章于 2022-02-22 17:46:07 发布

VIP文章 MDR_0820

最新推荐文章于 2022-02-22 17:46:07 发布

阅读量229

点赞数

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

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

版权

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 </p>
        </div

最低0.47元/天解锁文章

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue注册组件语法糖、事件修饰符，组建模块的抽离两种写法、父子组件通信

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"> <
复制链接

扫一扫