引言
- 在 vue中，子组件想要拿到父组件上的数据，该怎么拿？
创建vue实例，创建子组件模板
<body>
// vue实例控制区域
<div id="app">
*通过绑定子组件props上的属性，将父组件上的msg数据传递给子组件*
<tem-app :mark="msg"></tem-app>
</div>
// 子组件模板
<template id="tem">
<div>
*子组件子需要引用下自定义的mark属性，即可拿到父组件上传递过来的数据*
<h3>我是子组件-----{{ mark }}</h3>
</div>
</template>
<script>
// 定义全局子组件
Vue.component('tem-app',{
template : '#tem',
props : ['mark']
})
// Vue实例
var vm = new Vue({
el : "#app",
data : {
msg : '2017130440'
}
})
</script>
</body>
注意 : 子组件如果想要用父组件传递过来的数据， 就需要将子组件定义的属性原样的输出一下
- 总结
- 在子组件在props中创建一个属性，用以接收父组件传过来的值
- 在子组件标签中添加子组件props中创建的属性
- 父组件中注册子组件
- 通过属性绑定的方式，把需要传给子组件的值赋给该属性