2019-01-29 vue组件基础篇1

2019-02-14  本文已影响0人  pingping_log

组件

  1. 全局注册组件

import Vue from 'vue'
Vue.component('ceshi', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data() { 
          return { counter: 0 }
    }
})
export default {}

那个组件需要使用就直接添加使用
<ceshi></ceshi>
  1. 局部注册组件

var child = {
  template: '<button>测试</button>'
}
export default {
  components: {
    'ceshi':child
  }
}
  1. 父组件向子组件传递数据 props

【3.1】props的值可以是两种,一种是字符串数组,一种是对象

<div id="app">
    <ceshi msg="来自父组件的数据"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['msg'],
    template: '<div>{{ msg }}</div>',
})

var app = new Vue({
    el: '#app'
})

【3.2】由于HTML特性不区分大小写,当使用DOM模板时,驼峰命名(camelCase)的props名称要转为短横分隔命名(kebab-case)

<div id="app">
    <ceshi camel-case="提示信息"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['camelCase'],
    template: '<div>{{ camelCase}}</div>',
})

var app = new Vue({
    el: '#app'
})

【3.3】这里用v-model绑定了父级的数据parentMessage,当通过输入框任意输入时,子组件接收到的props "message"也会实时响应,并且更新组件模板。

<div id="app">
    <input type="text" v-model="parentMessage">
    <ceshi :message="parentMessage"></ceshi>
</div>

Vue.component('ceshi', {
    props: ['message'],
    template: '<div>{{ message }}</div>',
})

var app = new Vue({
    el: '#app',
    data: {
        parentMessage: ''
    }
})

【3.4】有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v-bind来动态绑定props的值,当父组件的数据变化时,也会传递给子组件

<div id="app">
    <ceshi message="[1,2,3]"></ceshi>
    <ceshi :message="[1,2,3]"></ceshi>
</div>
<script>
    Vue.component('ceshi',{
        props: ['message'],
        template: '<div>{{ message.length }}</div>'
    });
    var app = new Vue({
        el: '#app'
    })
</script>

注意,如果你要直接传递数字、布尔值、数组、对象。而且不使用v-bind,传递的仅仅是字符串,如上。同一个组件使用了两次,区别仅仅是第二个使用的是v-bind。渲染后的结果,第一个是7,第二个才是数组的长度3。

上一篇下一篇

猜你喜欢

热点阅读