Vue3 组件与组件之间的通信

Posted 2021-06-27 结构化思维wz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 组件与组件之间的通信相关的知识，希望对你有一定的参考价值。

Vue3 组件

Component 在spring中我们应该再熟悉不过，在spring中注册了组件，别的类就可以注入来使用。

组件是Vue中最强大的功能之一，组件可以拓展html元素，封装可重用代码。

组件系统让我们可以用独立可重复的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。

在这里插入图片描述

每个vue应用都是通过createApp函数创建的，传递给createApp的选项用于配置根组件。当我们挂载应用的时候，该组件被用做渲染的起点。

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

全局组件

注册全局组件

注册一个全局组件的语法格式如下：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-name ：组件名
/* … */ ：配置选项

使用全局组件

<my-component-name></my-component-name>

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <wz></wz>
</div>

<script>
 
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 button-counter 的新全局组件
app.component('wz', {
    template: '<h1>第一个自定义全局组件!</h1>'
})
 
app.mount('#app')
</script>
</body>
</html>

实例1—点击按钮计数器加1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
</div>

<script>
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
})
app.mount('#app')
</script>
</body>
</html>

组件的复用

组件进行任意次数的复用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

全局组件总结

以上的实例中我们的组件都只是通过 component 全局注册的。

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。

局部组件

局部组件的注册

你可以通过一个普通的 javascript 对象来定义组件：

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

局部组件的使用

components 选项中定义你想要使用的组件：

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <jubu-a></jubu-a>
</div>
<script>
 
const jubu = {
  template: '<h1>自定义第一个局部组件!</h1>'
}
 
const app = Vue.createApp({
  components: {
    'jubu-a': jubu
  }
})
 
app.mount('#app')
</script>
</body>
</html>

组件之间的通信

父组价–>子组件

data中的数据不能共享

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

父组件：

<div>
    <child msg="hello">子组件</child>
</div>

data(){
    return{
        msg:"父组件中的data msg"
    }
}

子组件child

<div>{{msg}}</div>

props:['msg']

props:[‘msg’] 就是父组件传来的值

子组件—>父组件

通常通过事件方式传递==$emit==

父组件：

<child @mycountevent="mydemo"></child>

methods:{
    mydemo(data){
        ...这个data就是num
    }
}

子组件：点击按钮触发父组件的方法，顺便传值

methods:{
    changenum(num){
        this.$emit('mycountevent',num)
    }
}

子组件与父组件之间的相互访问方式

子组件调用父组件的方法：
```
$parent 或 $root
```
父组件调用子组件的方法：
```
$children 或 $refs
```

以上是关于Vue3 组件与组件之间的通信的主要内容，如果未能解决你的问题，请参考以下文章

Android 调用组件 w/listener 或让 viewmodel 调用组件与片段通信

关于vue2与vue3

五vue3.0之组件通信详解(definePropsdefineEmitsdefineExpose)

vue3组件间通信

「 VUE3 + TS + Vite 」父子组件间如何通信？

Vue3 父子组件通信