vue-cli组件

最新推荐文章于 2021-11-05 20:43:23 发布

原创最新推荐文章于 2021-11-05 20:43:23 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍Vue.js中组件间的通信方法，包括如何通过父组件向子组件传递数据和方法，以及子组件如何调用父组件的方法。文章还展示了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

这是等价的两句话，特可以直接钩子函数

在这里插入图片描述
template表示出口，component表示引用组件，需导入，若是组件导入子组件，在父组件的script添加components这一段，如下

文件路径
在这里插入图片描述
button1.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
     
    </el-row>
  </div>
</template>

应该是默认会加上，下面这段代码，所以不用自己加

<script>
export default { }
</script>

再引用的fun1.vue这么引入

<template>
  <div class="about">
    <butto></butto>
  </div>
</template>
<script>
import butto from '../components/button1'
export default {
  components:{
    butto
  }
}
</script>

访问fun1效果如下
在这里插入图片描述
如果是export let username=‘xxx’
导入就是import {username} from xxx
导入默认不用指定名字，给了名字就要用名字
script 里的data必须为函数

驼峰命名，例如myName

用的时候改为my-name

组件化之后，和2个兄弟组件相关的方法最好放在他们共同的父组件里，
所以数据就放在父组件，方法也放在父组件，
引入组件以后，让子组件里的方法正常作用，需父组件向子组件传递值，和方法。
父组件如下图所示

<template>
    <div>   
        <search :formInline='formInline' :onsbm='onSubmit' :onsbms='onSubmits'></search>
        <display :tableData='tableData' :chk='check'></display>    
    
    </div>

</template>

<script>
  import search from './cpns/search'
  import display from './cpns/display'
  export default {
    components:{
        search,
        display
    },
    data() {
      return {
         formInline: {
          user: '10.32.218.29',
          region: '',
          InstanceId:'',
        },
        tableData:[],
      }
    },
    methods: {
      onSubmit() {
        this.$axios({
      url: "http://127.0.0.1:8000/api/333",
      method: "post",
      data:this.formInline
    }).then(response => (this.tableData = response.data))
      },
    }
  }
</script>

子组件如下图：
注意prop和方法名字不能重，所以不改变组件代码，还是改变传递值比较好。

<script>
export default {
    props:['tableData','chk'],
    data() {
        return {           
        }
    },
     methods: {
    check:function (){
                this.chk()
            },
    }, 
}
</script>