[JavaScript知识库]Vue-组件相关的知识点

Vue组件相关的知识点

学习内容：

Vue组件相关的知识点

1、 全局组件
2、 局部组件
3、 组件间相互传参
4、 组件相互访问
5、插槽

说点啥：

学习产出：

组件分类： 页面级组件、业务上可重复的基础组件、与业务无关的独立组件

全局组件的创建

简洁

app.component("box1",{
  template:`
    <div style="width:350px;height:200px;background-color:#f00">
      <Mybox></Mybox>
      </div>
  `
})

具体示例

<script>
const app = Vue.createApp({
	data(){return{msg:1}}
  }
})
// 注册全局组件
// 全局组件可在当前实例中任意位置使用
app.component("Mybox",{
  template:`
    <div style="width:150px;height:100px;background-color:#faf"></div>
  `
})
// 另一个全局组件
// 如果两个全局组件想要相互只用，需要在对应的组件的模板中调用
app.component("box1",{
  template:`
    <div style="width:350px;height:200px;background-color:#f00">
      <Mybox></Mybox>
      </div>
  `
})
app.mount('#app')

局部组件

vue的局部组件只能用在注册其的页面上
????eg:有两个子组件被vue实例引用了，这个vue实例可以用这两个子组件，但是这两个子组件不能相互使用，如果a子组件想用b子组件，那么需要在a中注册一下

let b={
  template:`
    <div style="width:350px;height:200px;background-color:#f00">
      <a></a>
      </div>
  `,
  components:{
    a
  }
}

组件间传参

注意:组件传参的属性名不能使用驼峰式，因为浏览器都会将其解析成小写

父→子

父组件中：
????在调用子组件的时候 通过动态绑定属性的方式，将数据传过去，属性名和数据名最好一样

 <div id="app">
    <h1>父传子</h1>
    <box :colleges="msg2" :branch="branch"></box>
  </div>

子组件中：
在子组件中通过prop来接收父组件传过来的数据，prop里是父组件传过来的属性名，要加引号

<script>
 const Box = {
      template: "#box",
      // 接收父祖件的数据
      props: ["colleges", "branch"]
    }
</script>

prop的类型

• 1.只指定名称
  props: [“colleges”, “branch”]
• 2.指定名称和类型
  注意此时的prop已经是对象了
  props:{
  colleges:String,
  branch:Number
  }
• 3.指定名称/类型/必要性/默认值
  props:{
  colleges:{type:String,required:true,default:xxx},
  branch:{type:Number,required:true,default:xxx},
  }
  prop中数据的类型有
  String/Number/Boolean/Array/Object/Date/Function/Symbol/自定义类型

子→父

????使用场景，子组件更改某个操作希望通知父组件，让父组件做出操作、或子组件像父组件传递数据

子组件中:
创建子组件，当子组件里的按钮被点了触发btnClick事件，然后通过$emit会发射一个事件

<script>
    const box = {
      template: "#box",
      methods:{
        btnClick(){
          alert("你是🐕🐕*10")
          // 发射自定义事件
          // 这里发射事件的名称不能是驼峰命名
          // 两个参数，第一个是事件名称，第二个是数据
          // 多个数据的传递一般采用对象或者数组的方式
          // this.$emit("send-click","我是恁爹的数据","1","2")
          // 可以发射多个不同的自定义事件
          this.$emit("send-click",{name:"张三",age:13})
        }
      }
    }
</script>

父组件中:
????父组件绑定子组件发射的自定义事件，当子组件一发射这个事件，那么就会执行绑定的函数

<div id="app">
    <box @send-click="clickFun"></box>
</div>
<script>
//methods中
  methods:{
        // 接收父组件自定义事件是没有事件对象的
        // 子组件自定义函数中的形参不是事件对象，而是子组件传来的值
        clickFun(val){
           console.log("子组件的事件被点击了");
           console.log(val);
        },
      }
 </script>

组件间的访问

父组件访问子组件

在调用子组件的时候需要为其设置一个ref名称，代表该子组件

父组件：

<div id="app">
  <!-- 这里需要给子组件绑定一个ref，代表当前组件的名称 -->
  <lk-box ref="box1"></lk-box>
  <lk-box ref="box2"></lk-box>
  <lk-box ref="box3"></lk-box>
  <button @click="getChildrenComponent">click me </button>
</div>

在调用该子组件的父组件中通过this.$refs.ref名访问

父组件：

<script>
methods:{
    getChildrenComponent(){
      // $refs每个实例都会有
      // this.$refs.box1表示拿到box1组件了，然后可以其经行操作
     console.log(this.$refs.box1.msg);
    //  this.$refs.box1.btnClick()
     this.$refs.box2.msg="我偷偷的更改了信息呢"
    }
  }
</script>

子组件访问父组件

(不建议使用，破坏了子组件的封闭性)

设有两两个组件a和b，组件a引用了组件b，
此时组件a就是组件b的父组件，如果组件b
想要访问组件a，直接this.\$parent
（表示父组件a）即可，对其内容 . 操作即可。

访问根组件：this.$root

<script>
  const Btn = {
      template: `
      <button @click="plus">点击了{{count}}</button>
    `,
      data() {
        return {
          count: 0,
        }
      },
      methods: {
        plus() {
          this.count++;
          // this.$parent代表引用当前子组件的父组件
          console.log(this.$parent.a);//哈哈哈
          // console.log(this.$parent.$parent.msg);//郑工学院
          // this.$root表示访问根组件
          console.log(this.$root.msg);
        }
      }
    }
 </script>

插槽

插槽 v-slot（匿名插槽和具名插槽）

插槽是组件里面的一个知识点，所谓插槽就是在子组件中预留一个位置，
然后父组件在调用子组件的时候，可以在这块位置经行操作。
(比如说，一个页头好多地方用但是里面的细节不同需要单独设置，
但是整个结构是不变的)

匿名插槽

子组件：
????在子组件中用占位，slot标签中可以写东西，当父组件没有插入东西时，就使用默认的

 <template id="box">
    <div style="width: 200px;height:150px;background-color: #f00;">
      <p>淘！淘你喜欢！</p>
      <!-- <button>淘一下</button> -->
      <!-- 预留插槽 -->
      <slot>插槽的默认内容</slot>
    </div>
  </template>
  <script>
    const hhBox={
      template:"#box",
    }
  </script>

父组件：
????父组件在调用子组件的时候，在标签内部写东西，就会替换掉子组件的slot标签

<div id="app" >
  <hhbox>
    <button>淘一下</button>
  </hhbox>
  <hhbox>
    <input type="text" placeholder="请输入内容">
  </hhbox>
  <hhbox>
</div>

具名插槽

子组件:
????将每个插槽命名

 <template id="box">
    <!-- 头部 -->
    <header>
      <slot name="header">头部插槽</slot>
    </header>
    <!-- 主体 -->
    <!-- 此插槽是匿名插槽 -->
    <main>
      <slot >主体插槽</slot>
    </main>
    <!-- 脚部 -->
    <footer>
      <slot name="footer">脚部插槽</slot>
    </footer>
    <p>======================================</p>
  </template>
  <script>
    const MyBox = {
      template: "#box",
    }
  </script>

父组件:
??使用v-slot:插槽名即可将对应的内容替换到插槽中，template标签会被内容替换掉不占用位置
匿名插槽和具名插槽的相互使用：
????在子组件中，有匿名插槽也有具名插槽，在父组件中，具名插槽用v-slot：插槽名占用，用v-slot:default的模板会自动替换到匿名插槽中

<div id="app">
    <mybox>
      <template v-slot:header>
        <button>我是头部</button>
      </template>
      <!-- 使用v-slot:default可以将此模板替换为子组件的匿名插槽 -->
      <template v-slot:default>
        <input type="text" placeholder="我是主体">
      </template>
      <template v-slot:footer>
        <img src="1.jpg">
      </template>
    </mybox>
  </div>