三十七、深入vue.js组件component（下篇） -凯发k8官方网
@author：runsen
@date：2020/7/4
人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾 （作者：runsen ）
作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海！
今天进入vue-router和组件component关系和通信的学习。vue 通信也是面试中非常高频的问题，有很多面试题，都是围绕通信展开。
文章目录
- 组件关系
- 父子关系
- 兄弟组件
- props
- emit
几种通信方式无外乎以下几种：
- props（常用）
- $emit (组件封装用的较多)
- $attrs 和 $listeners (组件封装用的较多)
- provide 和 inject （高阶组件/组件库用的较多）
先让runsen开始 组件关系
父子关系
父子关系即是组件 a 在它的模板中使用了组件 b，那么组件 a 就是父组件，组件 b 就是子组件。
<script>// 注册一个子组件vue.component('child', {data() {return {text:"我是father的子组件"}},template:"{{text}}"})// 注册一个父组件vue.component('father', {// 在模板中使用了child组件template:"兄弟组件
两个组件互不引用，则为兄弟组件
<script>// 注册一个兄弟组件vue.component('borther1', {data() {return {text:"我是borther1"}},template:"{{text}}"})// 注册一个兄弟组件vue.component('borther2', {data() {return {text:"我是borther2"}},template:"{{text}}"}) script>跨级组件：就是在父子关系中，中间跨了很多个层级。
组件的构成：一个再复杂的组件，都是由三部分组成的： prop、 event、 slot，它们构成了 vue.js 组件的 api。
props用于子组件接收来自父组件传递的数据。父组件可以将一条数据传递给子组件，这条数据可以是动态的，父组件的数据更改的时候，子组件接收的也会变化。
子组件被动的接收父组件的数据,子组件不要再更改这条数据了。
我们先看一个简单的案例，代码来自菜鸟教程
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <body><div id="app"><child message="hello!">child> div> <script> // 注册 vue.component('child', {// 声明 propsprops: ['message'],// 同样也可以在 vm 实例中像 "this.message" 这样使用template: '{{ 0 }}'# template: '{{ message }}' 和上句完全一样 }) // 创建根实例 new vue({el: '#app' }) script>子组件需要显式地用 props 选项声明 “prop”，这里message就是prop。在对应的模板中使用message属性就可以传参。
下面我们看一个子组件从vue实例中的data传参。
<body><div id="app"><child :message="mymessage"></child> </div> <script> // 注册 vue.component('child', {// 声明 propsprops: ['message'],template: '{{ message }}' }) // 创建根实例 new vue({el: '#app',data() {return {mymessage:"hello world"}}, }) </script>:message表明是从实例中的data取值，取值前，需要在注册的时候 声明 props。
接下来，我们就学习子组件→父组件通信。
相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。
每一个vue实例都实现了事件接口，我们可以用它提供的api $emit( eventname)来触发一个事件。
我先把标准代码给出。
<body><div id="app"><son @connect="say"></son></div><script>vue.component('son', {template: `<button @click="send">点击</button>`,methods: {send() {this.$emit('connect');}}});const app = new vue({el: "#app",methods: {say() {console.log(`大家好，我监听到了事件connect的触发`);}}});</script> </body>注册子组件，就是一个按钮button，点击它的时候，会触发组件内部的send( )方法，而方法体里面会触发一个事件，事件名取名为：“connect”。
然后我们就去父组件监听这个事件‘connect’，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用@符号， 我们采用缩写来监听。
我们设置了事件connect触发的处理程序是一个say( )方法，我们补上say( )方法的定义：
下面就是代码的最终效果
总结：父组件 a 通过 props 参数向子组件 b 传递数据，b 组件通过$emit向a组件发送一个事件（携带参数数据），a组件中监听$emit 触发的事件得到 b 向 a 发送的数据。
、
总结
以上是凯发k8官方网为你收集整理的三十七、深入vue.js组件component（下篇）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：