vue.js component 学习手记

2019独角兽企业重金招聘Python工程师标准>>>

1 global register

2 local register

3 template parsing caveats

4 data 必须是函数

5 props down, events up

6 dynamic props

7 数值传递和字串传递

8 自定义事件

9 scope

10 dynamic component

1 global register

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

Vue.component('my-component',{
    template:'<div>A custom component!</div>'
});

new Vue({
    el:'#example'
});

ps: 需要注意的是，component会重新绘制#example元素，所以，渲染后，#example就不存在了，第一层div就是component

2 local register

使用components option

<div id="local-component">
    <h1>local component</h1>
    <my-local-component></my-local-component>
</div>

let Child = {
    template:'<div>A local component!</div>'
};

new Vue({
    el:'#local-component',
    components:{
        'my-local-component':Child
    }
});

3 template parsing caveats

invalid content

<table>
  <my-row>...</my-row>
</table>

valid content 使用 is

<table>
  <tr is="my-row"></tr>
</table>

4 data 必须是函数

let data = {
    message:'hello'
};

let Child = {
    template:'<div>{{message}}</div>',
    data:function () {
        return {message:'hello'};
    }
};

new Vue({
    el:'#local-component',
    components:{
        'my-local-component':Child
    }
});

5 props down, events up

ps:父属性的变化会引起子component属性的变化，反正不然

<div id="props-example">
    <child message="hello"></child>
</div>

let child = {
    template:'<span>{{message}}</span>',
    props:['message']
}
new Vue({
    el:'#props-example',
    components:{
        'child':child
    }
});

这里有两种情况需要子component 去改变prop

• 这个prop只是传递过来一个初始值，子component会使用它创建一个新的属性
• prop是粗糙的原始值，需要经过处理子component才可以使用

上述两个case对应的方法：

• 子component定义一个local data property，使用父传递的prop作为初始值
• 子component定义一个computed property, 使用父传递的prop计算

当prop是Array 或 Object时，传递的就是reference, 所以子component对prop的操作，会影响到父的数据

6 dynamic props

不使用component

<div id="dynamic-props">
    <input v-model="parentMsg" />
    <span>{{parentMsg}}</span>
</div>

new Vue({
    el:'#dynamic-props',
    data:{
        parentMsg:'pengqin'
    }
});

使用component

<div id="dynamic-props">
    <input v-model="parentMsg" />
    <dynamic-child v-bind:message="parentMsg"></dynamic-child>
</div>

let dynamicChild = {
    template:'<span>{{message}}</span>',
    props:['message']
};

new Vue({
    el:'#dynamic-props',
    data:{
        parentMsg:'hello'
    },
    components:{
        'dynamic-child':dynamicChild
    }
});

7 数值传递和字串传递

<!-- this passes down a plain string "1" -->
<comp some-prop="1"></comp>

使用v-bind,传递数值属性值为number

<!-- this passes down an actual number -->
<comp v-bind:some-prop="1"></comp>

7 prop validation 属性验证

属性值的类型可以限制，加以验证

下面的例子就要求component的message属性值必须是Number类型

<div id="validation">
    <validation-component v-bind:message="propA"></validation-component>
</div>

let validationComponent = {
    template:'<div class="validation-component">{{message}}</div>',
    props:{
        message:Number
    }
};

new Vue({
    el:'#validation',
    data:{
        propA:123
    },
    components:{
        'validation-component':validationComponent
    }
});

下面是多种validation的组合，有默认值设置default, 必须项required,还有自定义的validator function

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以为6类：Number, String, Boolean, Function, Array, Object

如果是自定义的构造函数，使用instanceof

8 自定义事件

 8.1 同样使用v-on绑定自定义事件的handler

<div id="counter-event-example">
    <p>{{total}}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter',{
    template:'<button v-on:click="clickedButton">{{counter}}</button>',
    data:function () {
        return {
            counter: 0
        }
    },
    methods:{
        clickedButton:function () {
            this.counter += 1;
            this.$emit('increment');
        }
    }
});

new Vue({
    el:'#counter-event-example',
    data:{
        total:0
    },
    methods:{
        incrementTotal:function () {
            this.total += 1;
        }
    }
});

通过自定义事件，将父方法传递给子，子在事件方法里面可以调用父传递过来的方法，从而修改父的数值，是在子中修改父数据的一种方法

 8.2 form input comoponents 使用 自定义事件

通过input的事件绑定，看一下v-model的原理

<input v-model="something">

其实，拆分成事件，就是如下的样子

<input v-bind:value="something" v-on:input="something = $event.target.value">

可以看出，使用了value props, 触发了input 事件

总结就是，要模仿v-model,需要满足下面两个条件

• accept a value prop
• emit an input event with the new value

<div id="v-model-example">
    <p>{{ message }}</p>
    <my-input label="Message" v-model="message"></my-input>
</div>

Vue.component('my-input',{
    template:`<div class="form-group">
                <label v-bind:for="randomId">{{ label }}:</label>
                <input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput" />
            </div>`,
    props:['label','value'],
    data:function () {
        return {
            randomId:'input-' + Math.random()
        };
    },
    methods:{
        onInput:function (event) {
            this.$emit('input',event.target.value);
        }
    }
});
new Vue({
    el: '#v-model-example',
    data: {
        message: 'hello'
    }
});

9 scope

金句：

Everything in the parent template is compiled in parent scope;

everything in the child template is compiled in child scope.

下面的例子中，message是父数据

work!

<child-component>
  {{ message }}
</child-component>

下面的例子v-show应该绑定父数据

not work!

<child-component v-show="someChildProperty"></child-component>

绑定子数据，需要在子模板中

Vue.component('child-component', {
  // this does work, because we are in the right scope
  template: '<div v-show="someChildProperty">Child</div>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

9.1 slot 可以用来放fallback

my-component

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

a parent that use my-component

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

rendered

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

9.2 named slot可以组合app layout

app-layout template

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

parent use

<app-layout>
  <h1 slot="header">Here might be a page title</h1>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <p slot="footer">Here's some contact info</p>
</app-layout>

rendered

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

10 dynamic component

炫酷的动态组件切换，利用保留的<component>和绑定is属性(v-bind:is='someComponentName')

keep-alive 可以记录组件的状态，避免重新渲染

<div id="dynamic-component">
    <keep-alive>
        <component v-bind:is="currentView"></component>
    </keep-alive>
</div>

let Home = {
    template:'<p>home</p>'
};

let Posts = {
    template:'<p>posts</p>'
};

new Vue({

    el:'#dynamic-component',
    data:{
        currentView:'posts'
    },

    components:{
        home:Home,
        posts:Posts
    }
});

11 child component refs

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile

ps: $ref 只有当component render后才会计算，并且不会react,所以避免在template 和 computed中使用

转载于:https://my.oschina.net/u/2510955/blog/755535