vue.js父组件向子组件传递

Vue 组件的 API 来自三部分 - props, events 和 slots :

Props 允许外部环境传递数据给组件

Events 允许从外部环境在组件内触发副作用

Slots 允许外部环境将额外的内容组合在组件中。

注册

之前说过,我们可以通过以下方式创建一个 Vue ;
实例:

new Vue({
el: '#some-element',
// 选项
})

要注册一个全局组件,你可以使用 Vue.component(tagName, options)
例如:

Vue.component('my-component', {
// 选项
})

父组件向子组件传递【props】

【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。
【2】下面示例中的写法,不能传递父组件data属性中的值
【3】会覆盖模板的data属性中,同名的值。

<div id="app">
<tm1 v-bind:m="title"></tm1>
<tm2></tm2>
</div>
<template id="top">
<div>
111{{m}}
</div>
</template>
<template id="top1">
<div>
222
</div>
</template>

js代码

var tm1={
template:“#top”,
props:【‘m’】
};
var tm2={
template:"#top1”,
};
new Vue({
el:"#app",
data:function(){
return{
title:"我是父亲"
}
},
components:{tm1,tm2}
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 有一篇非常棒的关于vue.js的组件的文章,写的特别好,特别清楚,容易理解。链接:上篇:http://www.cn...
    恰皮阅读 1,803评论 0 8
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,104评论 0 42
  • 什么是组件 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用...
    angelwgh阅读 792评论 0 0
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,266评论 0 6
  • 前言 本文由阅读一篇vue.js组件文章学习后笔记http://www.cnblogs.com/keepfool/...
    海娩阅读 793评论 2 2