vue --- > 从模块从父元素获取数据

vue的精彩之处在于其组件的可复用性.下面谈谈组件(component)如何从父元素获取数据

模块引用

首先说说,如何引用模块

<div id="app">
    <my-component ></my-component>  
</div>
<script src=“unpkg.com/vue/dist/vue.min.js”> </ script>   // vue的CDN
<script>
    Vue.component('my-component',{  // 模块的声明,注意:一定要在Vue实例挂载之前
        template: '<div> {
  { message }}</div>'   // 模块的模板, 用于替换<my-component>中的内容
    })
    var app = new Vue({
        el:"#app",
    })
</script>

此时,自定义模块my-component就在父元素内了.

props

vue提供了一个props属性,它的作用是将父元素的数据,正向传递给子模块,例如:

// 改变<my-component>,将message数据(父元素)绑定到该模块上
<div id = "app">
    <input type="text" v-model.lazy="msg" placeholder="你有什么想对我说">
    <my-component message="来自父元素的消息" :warning-one="msg