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:{}}
}
}

转载于:https://www.cnblogs.com/hjdjs/p/7217184.html

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

Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
聊聊后端程序员的知识体系-第一篇
聊聊后端程序员的知识体系-第一篇原文链接:https://www.fpthinker.com/backend_knowledge_architecture/knowledge.htmll 亲爱的读者 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue 父组建获取子组建方法为获得_Vue父子组件状态同步的最佳方式
平时我们在使用Vue开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
Vue 教程第四篇—— Vue 实例化时基本属性
实例元素 el 实例元素指的是 Vue 实例化时编译的容器元素,或者说是 Vue 作用的元素容器 <div id="app"></div> var vm = ...

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

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

最新文章

热门文章