Vue学习笔记-Day4 - vue组件基础、父子访问

day4 Vue组件

组件化的核心思想就是把UI结构映射到恰当的组件树，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们我们的应用。

全局注册和局部注册

全局注册，故名思及就是组件时全局注册的，再注册他们之后可以再任何新创建的Vue实例中使用。

   //创建组件构造器
    const myBook = Vue.extend({
      template:'#books1',
      data(){
        return {
          msg:"这是我喜欢的book",
        }
      } 
     });
     //注册组件
     Vue.component('mybook', myBook);

局部组件：注册之后只能在当前的实例中使用

new Vue({
  el: '#app',
  components: {
    'mybook': mybook
  }
})

---

这里补充一个小知识：在组件中，data的数据类型必须是函数，然后返回一个对象：

data(){
    return {
    }
}

这是因为组件是可以复用的，组件的复用导致data中定义数据的复用，所以利用函数的块作用域让其只在局部作用。

模块系统

在使用webpack或者babel的模块系统后，我们可以需要使用某组件的地方进行局部注册导入想使用的组件

通过使用 import导入后，注册就可以直接使用了

import ComponentA from './ComponentA'
//然后进行局部注册
export default {
  components: {
    ComponentA
  }
}
//使用

全局注册组件：

如果某些组件的复用度比较高，包含内容简单，这种可以称之为基础组件，则可以将该组件进行全局注册。

父子组件通信

<div id="app">
      <ul>
        <li><span>名称</span><span>数量</span><span>价格</span></li>
        <li v-for="(book) in books">
          <span v-for="item in book">{{item}}</span>
        </li>
      </ul>
<!-- 监听事件 -->
      <mybook v-for="item in books" :key="item.name" :book="item" @changbooknumber="changbooknum"></mybook>

    </div>
    <template id="books1">
      <div>
        {{book.name}} - {{book.price}} - {{book.num}}
        <button @click="changePrice()">+</button>
      </div>
    </template>

    <script src="./vue.js"></script>
    <script>

    //创建组件构造器
    const myBook1 = Vue.extend({
      template:"#books1",
      data(){
        return {
          msg:"这是我喜欢的book",
          bookInfo:this.book,
        }
      },
      props:{
        book:{
          type:Object,
          default:function(){
            return {}
          }
        }
      },
      methods:{
        changePrice(book){
          this.bookInfo.num++;
            //发射事件
       this.$emit("changbooknumber",this.bookInfo.num);
        }
      }
     });

      const app = new Vue({
        el:"#app",
        data:{
          books:[
            {name:'JS',num:1,price:20},
            {name:'TS',num:1,price:30},
          ]
        },
        methods:{
          changbooknum(item){
            console.log(item)
          }
        },
        components:{
           //注册组件
          'mybook':myBook1,
        }
      })

父子组件访问

1 父组件访问子组件或子元素：$children、$refs

通过$children访问：

通过$refs访问

2 子组件访问父组件：$parent

这种情况用的比较少，

​ 因为我们强调低耦合，如果在子组件去操作父组件，耦合度较高， 同时，一个子组件被多次复用，那么在子组件中对父组件的操作不能明确是对那个父组件进行操作。

​ 另外，如果父父组件被子组件操作改变，很难做追溯源头

3 访问根组件：$root

4 依赖注入

provide：父组件在这里指定想要提供给子组件的方法/数据

inject: 子组件在这里接收指定的数据

这个方法比较好的地方就是可以选择性的给子组件进行分享，子组件进行接收，但是它将应用程序的组件与它们的组织方式耦合起来，是重构变得更加困难，同时所提供的属性是非响应式的

day4 Vue组件

组件化的核心思想就是把UI结构映射到恰当的组件树，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们我们的应用。

全局注册和局部注册

全局注册，故名思及就是组件时全局注册的，再注册他们之后可以再任何新创建的Vue实例中使用。

   //创建组件构造器
    const myBook = Vue.extend({
      template:'#books1',
      data(){
        return {
          msg:"这是我喜欢的book",
        }
      } 
     });
     //注册组件
     Vue.component('mybook', myBook);

局部组件：注册之后只能在当前的实例中使用

new Vue({
  el: '#app',
  components: {
    'mybook': mybook
  }
})

---

这里补充一个小知识：在组件中，data的数据类型必须是函数，然后返回一个对象：

data(){
    return {
    }
}

这是因为组件是可以复用的，组件的复用导致data中定义数据的复用，所以利用函数的块作用域让其只在局部作用。

模块系统

在使用webpack或者babel的模块系统后，我们可以需要使用某组件的地方进行局部注册导入想使用的组件

通过使用 import导入后，注册就可以直接使用了

import ComponentA from './ComponentA'
//然后进行局部注册
export default {
  components: {
    ComponentA
  }
}
//使用

全局注册组件：

如果某些组件的复用度比较高，包含内容简单，这种可以称之为基础组件，则可以将该组件进行全局注册。

父子组件通信

<div id="app">
      <ul>
        <li><span>名称</span><span>数量</span><span>价格</span></li>
        <li v-for="(book) in books">
          <span v-for="item in book">{{item}}</span>
        </li>
      </ul>
<!-- 监听事件 -->
      <mybook v-for="item in books" :key="item.name" :book="item" @changbooknumber="changbooknum"></mybook>

    </div>
    <template id="books1">
      <div>
        {{book.name}} - {{book.price}} - {{book.num}}
        <button @click="changePrice()">+</button>
      </div>
    </template>

    <script src="./vue.js"></script>
    <script>

    //创建组件构造器
    const myBook1 = Vue.extend({
      template:"#books1",
      data(){
        return {
          msg:"这是我喜欢的book",
          bookInfo:this.book,
        }
      },
      props:{
        book:{
          type:Object,
          default:function(){
            return {}
          }
        }
      },
      methods:{
        changePrice(book){
          this.bookInfo.num++;
            //发射事件
       this.$emit("changbooknumber",this.bookInfo.num);
        }
      }
     });

      const app = new Vue({
        el:"#app",
        data:{
          books:[
            {name:'JS',num:1,price:20},
            {name:'TS',num:1,price:30},
          ]
        },
        methods:{
          changbooknum(item){
            console.log(item)
          }
        },
        components:{
           //注册组件
          'mybook':myBook1,
        }
      })

父子组件访问

1 父组件访问子组件或子元素：$children、$refs

通过$children访问：通过childre的话，会拿到该父组件下面的所有子组件，并且存放在vue组件的数组中

通过$refs访问：为每个子组件取一个名字，通过名字拿到该组件：this.$refs.name

2 子组件访问父组件：$parent

这种情况用的比较少，

​ 因为我们强调低耦合，如果在子组件去操作父组件，耦合度较高， 同时，一个子组件被多次复用，那么在子组件中对父组件的操作不能明确是对那个父组件进行操作。

​ 另外，如果父父组件被子组件操作改变，很难做追溯源头

3 访问根组件：$root

4 依赖注入

provide：父组件在这里指定想要提供给子组件的方法/数据

inject: 子组件在这里接收指定的数据

这个方法比较好的地方就是可以选择性的给子组件进行分享，子组件进行接收，但是它将应用程序的组件与它们的组织方式耦合起来，是重构变得更加困难，同时所提供的属性是非响应式的

day4 Vue组件

组件化的核心思想就是把UI结构映射到恰当的组件树，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们我们的应用。

全局注册和局部注册

全局注册，故名思及就是组件时全局注册的，再注册他们之后可以再任何新创建的Vue实例中使用。

   //创建组件构造器
    const myBook = Vue.extend({
      template:'#books1',
      data(){
        return {
          msg:"这是我喜欢的book",
        }
      } 
     });
     //注册组件
     Vue.component('mybook', myBook);

局部组件：注册之后只能在当前的实例中使用

new Vue({
  el: '#app',
  components: {
    'mybook': mybook
  }
})

---

这里补充一个小知识：在组件中，data的数据类型必须是函数，然后返回一个对象：

data(){
    return {
    }
}

这是因为组件是可以复用的，组件的复用导致data中定义数据的复用，所以利用函数的块作用域让其只在局部作用。

模块系统

在使用webpack或者babel的模块系统后，我们可以需要使用某组件的地方进行局部注册导入想使用的组件

通过使用 import导入后，注册就可以直接使用了

import ComponentA from './ComponentA'
//然后进行局部注册
export default {
  components: {
    ComponentA
  }
}
//使用

全局注册组件：

如果某些组件的复用度比较高，包含内容简单，这种可以称之为基础组件，则可以将该组件进行全局注册。

父子组件通信

<div id="app">
      <ul>
        <li><span>名称</span><span>数量</span><span>价格</span></li>
        <li v-for="(book) in books">
          <span v-for="item in book">{{item}}</span>
        </li>
      </ul>
<!-- 监听事件 -->
      <mybook v-for="item in books" :key="item.name" :book="item" @changbooknumber="changbooknum"></mybook>

    </div>
    <template id="books1">
      <div>
        {{book.name}} - {{book.price}} - {{book.num}}
        <button @click="changePrice()">+</button>
      </div>
    </template>

    <script src="./vue.js"></script>
    <script>

    //创建组件构造器
    const myBook1 = Vue.extend({
      template:"#books1",
      data(){
        return {
          msg:"这是我喜欢的book",
          bookInfo:this.book,
        }
      },
      props:{
        book:{
          type:Object,
          default:function(){
            return {}
          }
        }
      },
      methods:{
        changePrice(book){
          this.bookInfo.num++;
            //发射事件
       this.$emit("changbooknumber",this.bookInfo.num);
        }
      }
     });

      const app = new Vue({
        el:"#app",
        data:{
          books:[
            {name:'JS',num:1,price:20},
            {name:'TS',num:1,price:30},
          ]
        },
        methods:{
          changbooknum(item){
            console.log(item)
          }
        },
        components:{
           //注册组件
          'mybook':myBook1,
        }
      })

父子组件访问

1 父组件访问子组件或子元素：$children、$refs

通过$children访问：

通过$refs访问

2 子组件访问父组件：$parent

这种情况用的比较少，

​ 因为我们强调低耦合，如果在子组件去操作父组件，耦合度较高， 同时，一个子组件被多次复用，那么在子组件中对父组件的操作不能明确是对那个父组件进行操作。

​ 另外，如果父父组件被子组件操作改变，很难做追溯源头

3 访问根组件：$root

4 依赖注入

provide：父组件在这里指定想要提供给子组件的方法/数据

inject: 子组件在这里接收指定的数据

这个方法比较好的地方就是可以选择性的给子组件进行分享，子组件进行接收，但是它将应用程序的组件与它们的组织方式耦合起来，是重构变得更加困难，同时所提供的属性是非响应式的