美文网首页
vue.js 语法

vue.js 语法

作者: 98Future | 来源:发表于2020-03-30 11:36 被阅读0次

Sending Data into a component requires Prop, Sending data out of Component requires Emit

Data Exchange between sibling component is achieved by Central Event Bus. Complicated sibling component data changes uses VueX

component包含 Template, Data, props, methods  其中Template是必须要的

Register component

install component

如果要从data() 里使用props的值: this.prop

send data out of component:

v-bind和v-model都是让external data进入的

经典啊😱😱😱😱

这里是一个使用event驱动emit 函数 把数据从component.data传递到Vue.data里的例子。这个例子展现了传入component以及传出component

首先Input的地方用v-model 和component.message绑定起来。 这样数据传入了component里。

然后定义Event: v-on: click='send'  调用了this.$emit()。 this.emit把message传入Vue.content里 通过v-on:relay='function' 这个Tag。 content注意! 在P tag里refer了。。。 {{content}}

V-model = V-bind + V-on

同时send Multiple data

Sibling components communication 

相关文章

  • 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • Vue.js 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • 用 Vue.js 做代办事宜列表

    前提条件 Vue.js 介绍 Vue.js 模板语法 Vue.js 组件 概要 类型:实践难度:中等 任务描述 做...

  • vue.js模板

    vue.js模板语法 vue.js使用了基于HTML的模版语法,允许开发者声明式地将Dom绑定至底层vue实例的数...

  • Vue.js模板语法

    Vue.js模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的教...

  • Vue 双向绑定原理浅析

    参考 Vue.js MDN 一、 vue 双向数据绑定语法 Vue.js作为前端MVVM三大框架之一,最核心的功能...

  • mpvue“踩坑”指南

    mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,框架整体和vue语法保持一...

  • 用 Vue.js 做计算器

    前提条件 Vue.js 介绍 Vue.js 模板语法 概要 类型:实践难度:中等 任务描述 实现如下图所示的计算器...

  • 概念

    首先vue.js 是库,不是框架 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑...

  • vue.js 语法

    Sending Data into a component requires Prop, Sending data...

网友评论

      本文标题:vue.js 语法

      本文链接:https://www.haomeiwen.com/subject/wxkgtftx.html