vue学习

1.$emit('data');//自定义一个data事件。$emit()触发事件，$on()监听事件，另外，父组件能够在使用子组件的地方直接用v-on绑定，不能用$on倾听子组件抛出的事件，而必须在模板里直接用v-on绑定。

2.data必须是一个函数。

Prop

使用 Prop 传递数据

组件实例的做用域是孤立的。这意味着不能 (也不该该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，咱们须要经过子组件的 props 选项。

子组件要显式地用 props 选项声明它期待得到的数据：

Vue.component( 'child', { // 声明 props props: [ 'message'], // 就像 data 同样，prop 能够用在模板内 // 一样也能够在 vm 实例中像“this.message”这样使用 template: '<span>{{ message }}</span>' })

而后咱们能够这样向它传入一个普通字符串：

<child message="hello!"></child>

结果：hello

3.组件在注册以后，即可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例以前注册了组件：就是new Vue 要在Vue.component以后建立。

<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>

错误：显示Make sure to declare reactive data properties in the data option.，，，须要在实例中的data 中初始化一个parentMsg.

SLOT：：

 

 

Vue组件中slot的用法

 

2017-01-10 23:20 2231人阅读 评论(0) 收藏 举报

 

版权声明：本文为博主原创文章，未经博主容许不得转载。

 

Vue组件中slot的用法

主要是让组件的可扩展性更强。

1. 使用匿名slot 

2. 给slot加个名字

若是不在有slot的组件里加入任何标签，slot什么都不会显示的。