Vue深度学习- 组件

Posted 2020-10-16 BluesQian

使用组件

在Vue中，可以用 Vue.extend() 创建一个组件构造器：

var MyComponent = Vue.extend({
  template:‘..........‘ //选项
})

要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：

// 全局注册组件，tag 为 my-component
Vue.component(‘my-component‘, MyComponent)

在注册之后，组件便可以用在父实例的模块中，以自定义元素 < my-component > 的形式使用。要确保在初始化根实例之前注册了组件：

<div id="example">
  <my-component></my-component>
</div>

demo

<div id="app">
    <my-component></my-component>
</div>

    var MyComponent = Vue.extend({
        template:"<div>A custom component</div>"
    });
    Vue.component("my-component",MyComponent);

    new Vue({
        el:"#app"
    });

Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props选项声明 props：

Vue.component(‘child‘, {
  // 声明 props
  props: [‘msg‘],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: ‘<span>{{ msg }}</span>‘
})