简介
此页面可以直接复制运行，包含以下应用：

Vue slot插槽使用
Vue v-model使用
Vue props使用
父子组件数据传递
element-ui使用
HTML方式注册子组件，可以将子组件数据写在一个js文件中，用标签引入，然后将子组件对象置入components中
Live Demo 在线示例
Live Demo

提示
不建议用HTML模式开发项目，建议使用vue-cli3创建项目，使用单文件组件模式开发
Vue cli3

根组件实例和组件（实例）的区别：

https://segmentfault.com/q/1010000012918351

代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Title</title>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

  <script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>

  <link href="https://cdn.bootcss.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet">

  <style>

    #app{

      display: flex;

      justify-content: space-between;

    }

    .parent, .child{

      width: 45%;

    }

    .el-card{

      height: 100%;

    }

  </style>

</head>

<body>

<div id="app">

  <div class="parent">

    <el-card>

      <div slot="header">

        <span>父组件</span>

      </div>

      <el-input v-model="ParentMsg"></el-input>

      <el-button type="primary" @click="changeChild" style="margin-top: 30px">改变子组件的msg</el-button>

    </el-card>

  </div>

  <div class="child">

    <el-card>

      <div slot="header">

        <span>子组件</span>

      </div>

      <child1 v-show="display" :parent-msg="childMsg"></child1>

      <child2 @change-data-from-child="changeParent"></child2>

    </el-card>

  </div>

</div>

<script>

  new Vue({

    el: '#app',

    data(){

      return {

        display:true,

        ParentMsg:"Hello This is Parent",

        childMsg: 'Hello, 我来自父组件的数据'

      }

    },

    methods: {

      changeParent(data){

        this.ParentMsg = data

      },

      changeChild(){

        this.childMsg = '我被父组件改变了'

      }

    },

    components: {

      'child1': {

        props: { //定义子组件的prop，用于父组件传递数据到子组件

          parentMsg: {

            type: String,

            default: ''

          }

        },

        template: '<div>\n' +

            '        <h2 v-show="msgDisplay">{{msg}}</h2>\n' +

            '        <p>{{parentMsg}}</p>\n' +

            '        <el-button @click="toggleMsgDisplay" type="success">切换子组件1中的信息显示隐藏</el-button>\n' +

            '    </div>',

        data() {//Vue中component的data必须通过function() return

          return {

            msg: 'This is a Child Component1!',

            msgDisplay: true

          }

        },

        methods: {

          toggleMsgDisplay() {

            this.msgDisplay = !this.msgDisplay

          }

        }

      },

      'child2':{

        template:"<el-button type='primary' @click='changeParentData' style='margin-top: 30px'>我是子组件2按钮,点击改变父组件内容</el-button>",

        data () {

          return {

            msg:"点击了子组件2按钮"

          }

        },

        methods:{

          changeParentData () {

            this.$emit('change-data-from-child', '我来自是子组件2') //事件传递用kebab-case风格

          }

        }

      }

    },

  })

</script>

</body>

</html>

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

  1. Vue 组件基础完整示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  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. 处理 read_csv 报错 OSError:Initializing from file failed

    1.问题发现 df=pd.read_csv("X-go报表_交易20191118.csv") print(df.info()) File "pandas/_libs/pa ...

  2. csv测试类。用起来，就是那么简单。每个单元格都是以逗号分隔

    package com.hyxt.wxpay.util; import java.io.File; import java.util.ArrayList; import java.util.List; ...

  3. spring boot项目接入xxl-job

    关于分布式任务调度平台XXL-JOB,作者 许雪里 在其发布的中文教程中已经介绍的很清楚了,这里就不做过多的介绍了.按照文档搭建xxl-job,做此纪录. 1.源码下载地址 GitHub:https: ...

  4. 深入理解Java输入输出流

    Java.io包的File类,File类用于目录和文件的创建.删除.遍历等操作,但不能用于文件的读写. Java 对文件的写入和读取涉及到流的概念,写入为输出流,读取为输入流.如何理解流的概念呢?可以 ...

  5. codeforces 1272F dp+记录路径

    题意 给出两个括号序列 \(S\) 和 \(T\),让你构造一个最短的合法括号序列使 \(S\) 和 \(T\) 是它的子序列. 分析 设 \(dp[i][j][k]\) 为这个最短的合法括号序列的前 ...

  6. CF1182F Maximum Sine【类欧，扩欧】

    题目链接:洛谷 题目描述:求整数$x\in [a,b]$使得$|2px \ mod \ 2q-q|$最小,如果有多个$x$输出最小的. 数据范围:$1\leq a,b,p,q\leq 10^9$ 第一 ...

  7. 在Android中使用OpenGL ES进行开发第（一）节：概念先行

    一.前期基础是知识储备笔者计划写三篇文章来详细分析OpenGL ES基础的同时也是入门关键的三个点: ①OpenGL ES是什么?与OpenGL的关系是什么?——概念部分 ②使用OpenGL ES绘制 ...

  8. ipv4保留地址

    曾经以为保留地址下面三类.原来使用中还有很多的. A类 10.0.0.0--10.255.255.255 B类 172.16.0.0--172.31.255.255 C类 192.168.0.0--1 ...

  9. MySQL数据分析（16）— 数据操作之增删改查

    前面我们说学习MySQL要从三个层面,四大逻辑来学,三个层面就是库层面,表层面和数据层面对吧,数据库里放数据表,表里放数据是吧,大家可以回忆PPT中jacky的这图,我们已经学完了库层面和表层面,从本 ...

  10. 第一次Java测试及感触（2018.9.20）

    在本周周四进行了java测试,有一点感触,测试的题目是用Java实现一个ATM机的管理系统.之前老师提前给我们样卷,结果考试的时候换了题型,瞬间脑子空白,一时不知道怎么下手,因为暑假虽然涉猎了java ...