vue知识总结第一篇vue组件的定义以及父子组件的传值。

vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中.。script用来写js,style中用来写css。那么我们来看看vue是怎么写的吧

子组件中

1,用export default 导出子组件,其中标红的是用来父子组件传值的this.$emit(‘reChild‘)指发送一个自定事件到父组件中,父组件中只要在引入这个子组件标签的时候v-on:reChild="rece"其中rece为父组件中methods中的一个方法。 props表示用来接收父组件传递过来的值还可以对这个值进行类型的限制和默认值的设置。父组件只要在这个子组件的标签上用v-bind:data=‘aaa‘这个aaa是父组件中data中的一个变量,或者data=‘bbb’这时候data的值就是一个常量了。 

<template>
    <div>
    <div @click=‘toParent‘><div/>
    </div>
</template>

export default {
data(){},
methods:{
    toParent(){
    this.$emit(‘reChild‘);
    }
},
props:{
    data:{
        type:Object,
        default:{}
    }
}
}    
时间: 2024-10-07 12:13:21

vue知识总结第一篇vue组件的定义以及父子组件的传值。的相关文章

unix环境高级编程基础知识之第一篇

陆陆续续看完了圣经第一章,熟悉了unix的整个编程流程,c语言的用处在这里得到伸张. 从unix的体系结构,原来操作系统包括内核及一些其他软件,我们常常误称为linux内核为操作系统,这俨然成为一种共识.基本熟悉了shell的介绍,主流的是bash(Bourne-again shell),unix的文件的基本操作,出错处理,用户ID,信号(感觉类似windows的消息),时间值,最后还有系统调用和库函数的区别. 自己把这篇的所有代码用vim的敲完了,主要前期是熟悉unix的基本命令编程,大致了解

vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面开发模式. 2. 路由在web 有两种: 第一种 hash hash值前面带 # "  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string  #hash " 第二种是 h

Vue组件通信之非父子组件传值

前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考: https://www.cnblogs.com/ViavaCos/p/11712131.html 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><

Vue_(组件通讯)简单使用父子组件

Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是 Vue实例 -- 根组件 root component-a – 相对于root 这是子组件,相对于component-b这是 父组件 component-b -- 子组件 目录结构 简单的通过在父组件调用子组件,但父组件的值是无法直接传递给子组件 <!DOCTYPE html> <

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件 首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

React 组件基本使用(3) ---父子组件之间的通信

当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据. 很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热.这里就有两个组件,输入框和它下面的显示内容,且它们共享一个状态,就是温度.所以我们要把温度这个状态放到这两个组件的父组件中.这里就有三个组件,一个输入框TemperatureInput,  一个是显示内容

Vue学习【第一篇】:Vue初识与指令

什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(

Vue入门教程 第一篇 (概念及初始化)

注:为了本教程的准确性,部分描述引用了官网及网络内容. 安装Vue 1.使用npm安装vue: npm install vue 2.下载使用js文件: https://vuejs.org/js/vue.min.js Vue概念 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结