<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>组件基础</title>

</head>

<body>

    <div id="app">

        <my-father></my-father>

    </div>

    <template id="son">

        <div>

            <h1>my-son</h1>

            <h3>{{ title }}</h3>

            <button @click="test">test $emit()</button>

        </div>

    </template>

    <template id="father">

        <div>

            <h1>my-father</h1>

            <!-- 监听子组件发射的 test 事件 -->

            <my-son title="test props" @test="test"></my-son>

        </div>

    </template>

    <script src="https://vuejs.org/js/vue.js"></script>

    <script>

        // 一 、新建组件

        // 使用组件的第一步就是新建组件

        // 全局组件 ：使用 Vue.component() 新建的组件是全局组件

        // 局部组件 ：使用 components 属性挂载子组件

        // Vue.extend() ：可以新建一个组件对象

        // 二 、组件的复用

        // 组件的 data 必须是一个函数

        // 因为组件复用时使用的是同一个组件实例 ，如果 data 作为一个引用类型的值的话 ，所有的组件将引用同一个 data

        // 三 、props 自定义组件特性

        // props 属性可以为组件自定义特性

        // 当一个值传递给一个 prop 特性的时候 ，它就会变成组件实例的一个属性

        // 四 、根元素

        // 每个组件只能拥有一个根元素

        // 五 、监听子组件事件

        // 组件可以使用 $emit() 方法发射一个事件 ，然后在父组件中监听这个事件

        // 六 、组件名大小写

        // 定义组件名的方式有两种

        // 使用 kebab-case ：Vue.component('my-component-name', { /* ... */ })

        // 使用 PascalCase ：Vue.component('MyComponentName', { /* ... */ })

        // 不管组件名使用的是 kebab-case 还是 PascalCase ，对应的标签名都是 <my-component-name>

        // 第一步 ：新建一个 my-son 组件对象

        let MySon = Vue.extend({

            template: '#son',

            // 第四步 ：自定义组件特性

            // 使用子组件的时候就可以使用 v-bind 为特性设置值了

            props: ['title'],

            methods: {

                test(){

                    // 发射一个 test 事件

                    this.$emit('test')

                }

            }

        })

        // 第二步 ：新建一个 my-father 全局组件

        Vue.component('my-father', {

            template: '#father',

            // 第三步 ：使用 components 属性挂载子组件

            components: {

                MySon

            },

            methods: {

                test(){

                    alert('说点什么好呢...')

                }

            }

        })

        // 第三步 ：定义根组件

        new Vue({

        }).$mount('#app')

    </script>

</body>

</html>

Vue 组件基础完整示例的更多相关文章

  1. Vue 组件基础完整示例2

    简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. Vue组件基础

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  4. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  5. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  6. vue组件基础之创建与使用

    一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...

  7. Vue组件基础知识总结

    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...

  8. vue—组件基础了解

    什么是组件? 组件是vue中的一个可复用实例,所以new Vue()是vue中最大的那个组件,根组件,有名字,使用的时候以单标签或双标签使用 vm = newVue() 是最大的组件,具有很多实用性的 ...

  9. Vue组件的基础用法（火柴）

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

随机推荐

  1. Lua 学习之基础篇七<Lua Module,Package介绍>

    Lua 之Module介绍 包管理库提供了从 Lua 中加载模块的基础库. 只有一个导出函数直接放在全局环境中: [require]. 所有其它的部分都导出在表 package 中. require ...

  2. TCP IP协议和网络安全

    传输层的两个协议:     可靠传输 TCP 分段传输 建立对话(消耗系统资源) 丢失重传netstat -n     不可靠传输 UDP 一个数据包就能表达完整的意思或屏幕广播   应用层协议(默认 ...

  3. groovy基本语法--JSON

    1.groovy提供了对JSON解析的方法       ①JsonSlurper   JsonSlurper是一个将JSON文本或阅读器内容解析为Groovy数据的类结构,例如map,列表和原始类型, ...

  4. 阿里云服务器(windows server 2012 r2 64位)安装MYSQL8.0.18数据库 （小白必备）

    今儿中午询问了朋友关于服务器的一些事情后,就开始安装了,从中午大概一点,整到晚上九点,终于装成功了,感觉安装过程能遇到的问题全遇到了,给后面的朋友一些参考意见把. 第一次碰云服务器,措辞不当或不正确之 ...

  5. mysql 执行sql语句执行问题

    SQL是一套标准,全称结构化查询语言,是用来完成和数据库之间的通信的编程语言,SQL语言是脚本语言,直接运行在数据库上.同时,SQL语句与数据在数据库上的存储方式无关,只是不同的数据库对于同一条SQL ...

  6. Jest自动化测试

    最近一直很苦恼,测试这一块的内容,一直想提升测试效率,从慕课网了解到了自动化测试jest ,准备试下下,记录一下学习笔记,方便别人使用 1 什么是 Jest? Jest是 Facebook 的一套开源 ...

  7. border-style

    border-style 语法: border-style:<line-style>{1,4} <line-style> = none | hidden | dotted | ...

  8. 「NOI 2018」归程「Kruskal 重构树」

    题解 Kruskal重构树:每次一条边连接两个集合,建一个新点,点权为该边边权:把这两个集合的根连向新点. 性质:(如果求的是最大生成树)叶子结点是图中实际结点:叶子到根路径上点权递减:两点间lca的 ...

  9. python3.5+win7 安装 numpy 和scipy的总结

    1.安装numpy.      官网下载numpy.下载地址为https://pypi.Python.org/pypi/numpy.选择与Python版本相对应的numpy版本.之后在python35 ...

  10. 【概率论】3-1:随机变量和分布(Random Variables and Discrete Distributions)

    title: [概率论]3-1:随机变量和分布(Random Variables and Discrete Distributions) categories: Mathematic Probabil ...