VUE组件浅析-CSDN博客

本文链接：https://blog.csdn.net/qq_45891136/article/details/108313714

1.什么是组件?

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

2.怎么注册组件

Vue.component(): 将组件构造器注册为一个组件，并且给它起一个组件的标签名称
需要两个参数：第一个参数是注册组件的标签名，第二个参数是组件构造器名称

注意：组件必须挂载在某个Vue实例中，否则不会生效。

<div id="app">
    <!-- //使用组件 -->
    <my-cpn></my-cpn>
  </div> 
  //必须挂载在某个Vue实例中，否则不会生效
  <my-cpn></my-cpn>
<script src="../vue.js"></script>
<script>
  
  // 注册组件   （全局组件）
  Vue.component("my-cpn",cpn{
  	data(){
  	
  	}
  });

  new Vue({
    el:'#app',
  })
</script>

3.父组件与子组件

在一个组件中如果存在另一个组件，则形成了组件之间的父子关系。当两者需要数据交互时，其访问方式存在不同。默认情况下，子组件是无法访问到父组件中的data和methods，当子组件需要访问父组件data时，可以通过v-bind指令进行属性绑定，子组件访问到的数据存储在props中，props类似于data，但它是只可读的，而且其中所有的数据都是来源于父组件，而子组件的data是可读可写的，是子组件私有的。当父组件需要访问子组件数据时，可以通过this.$emit(‘方法名’, 子组件数据)方式，子组件调用父组件方法，同时把数据传递给父组件，方法名为子组件内部自定义，通过v-on指令绑定父组件函数实现调用。

prop