vue.js学习笔记五(组件)

一、组件的使用

1.全局注册

1)必须先注册再实例化

2)命名最佳是小写,中间有一个横杠:my-component

3)Vue.component({

})

4)显然,组件只能在Vue作用域内有效,必须写在

...
里。
但是,如果你有两个vm,全局注册可以在这两个vm都起作用。

vue.js学习笔记五(组件)_第1张图片

2.局部注册

var app2=new Vue({
        el:"#app2",
        components :{
            'my-component2':{
                template:'

我是component2

' } } })
那么 只能是在app2的作用域,也就是 '#app2'下起作用。

vue.js学习笔记五(组件)_第2张图片

3.组件在dom中放置的位置有讲究

      也包括到你的组件中去。

      如果你硬要实现上面的这种写法,vue也提供了一个办法:

      自定义组件 会被当作无效的内容,因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性:

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

      4.组件的data属性

      错误写法
          Vue.component('my-component', {
            template: '{{ message }}',
            data: {
              message: 'hello'
            }
          })

      data必须是函数

         Vue.component('my-component', {
            template: '{{ message }}',
            data: function(){
               return {
                  message:'hello'
              }
          }
          })

      5.组件的嵌套使用

      1) 组件内定义的数据只能在组件内使用,所以子组件想使用父组件的数据,就需要通过传参数的方式。

      2)参数传递的顺序是 从上到下(从父组件向下传递到子组件)

      另一个是事件的传递。我们大家都了解事件冒泡,事件是从子节点传递到父节点,一直传递到顶部的。
      Vue组件也是这个原理,子组件一有点风吹草动(事件),父组件,父父组件就会一层一层的马上知道。

      简而言之,参数往下传,事件往上传

      二、Props

      1.定义

      组件实例的作用域是孤立的。子组件不能直接引用父组件的数据。需要借助props才能下发到子组件中

      而子组件要 显式 地用props选项 声明它语气的数据

      Vue.component('child', {
        // 声明 props,像函数传参的参数一样
        props: ['message'],
        // 同样也可以在 vm 实例中通过 this.message 来使用
        template: '{{ message }}'
      })
      
      然后我们可以这样向它传入一个普通字符串:
      
      

      2.驼峰命名和短横线命名

      HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):
      Vue.component('child', {
        // 在 JavaScript 中使用 camelCase
        props: ['myMessage'],
        template: '{{ myMessage }}'
      })
      
      
      <child my-message="hello!">child>

      3.动态参数

      我们上面传的是一个字符串,如果我想传入一个变量名呢

你可能感兴趣的:(vue.js学习笔记五(组件))