父子组件传值

最新推荐文章于 2024-08-02 09:29:40 发布

置顶打怪升级&

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量232

点赞数

分类专栏：小白学习记录学习vue（WebStorm）文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_53298230/article/details/129981095

版权

小白学习记录同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

学习vue（WebStorm）

11 篇文章 0 订阅

订阅专栏

接收数据后父子传值

一、准备工作

在 html 中利用链接引入所需。
（此处引入如下：）

<!-- 引入VUE -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入axios -->
   <script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script>

一、创建定义并引用组件

1.在html中创建子组件

<template id="子组件名"><div>  </div></el-dialog>

2.定义子组件

 <script>
 Vue.component('引用子组件名', {
 template: '#子组件名',
 }

父组件引用组件

 <引用子组件名></引用子组件名>

总结：

<div id="app">
  <h3>页面引用定义好的按钮组件</h3>
  <zujian></zujian>
</div>
<template id="templ"> 
    <el-button plain>朴素按钮</el-button>    
</template>
<script>
  Vue.component('zujian',{
    template: '#templ',
  })
</script>

简单实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> VUE+ELEMENT-UI 图书列表 </title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script> 
</head>
<body>
<div id="app">
  <h3>页面引用定义好的按钮组件</h3>
  <zujian></zujian>
</div>
<template id="templ">
  <el-row>
    <el-button plain>朴素按钮</el-button> 
    <el-button type="success" plain>成功按钮</el-button> 
  </el-row>
</template> 
<script>
  Vue.component('zujian',{
    template: '#templ',
  })
</script>
<script>
  var vm=new Vue(
          {
            el:"#app",
          }
  );

</script>
</body>
</html>

二、父子组件传值

子组件定义中： props[‘信息’] (与 data 齐平)

<script>
  Vue.component('bk_dialog', {
    template: '#dialog',
    data() { return { form: {  date: '',  name: '' } } },
    props:['dates'],
    methods: {
      showdialog(){
        this.dates=this.from;
        this.dialogFormVisible=true;
      },
    }
  })
</script>

子组件的引用中绑定 :信息
<引用子组件名 :信息=“scope.row”></引用子组件名>

   <template slot-scope="scope">
          <bk_dialog :dates="scope.row"></bk_dialog>
        </template>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> VUE+ELEMENT-UI 图书列表 </title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script>
  <style>

  </style>
</head>
<body>
<div id="app">
    <h3>列表</h3>
      <tables></tables>
</div>
<template id="templ">
  <div>
    <el-table
          :data="tableData"
          style="width: 100%">
    <el-table-column
            label="日期"
            width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="姓名"
            width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
          <bk_dialog :dates="scope.row"></bk_dialog>
        </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<template id="dialog">
  <div>
    <el-button type="success" size="mini" @click="dialogFormVisible = true"plain>编辑</el-button>

    <el-dialog title="修改数据" :visible.sync="dialogFormVisible"> 
        <el-form :model="dates">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="dates.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="dates.name" autocomplete="off"></el-input>
        </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
<!--  点击事件@click="dialogFormVisible = false"            -->
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  Vue.component('bk_dialog', {
    template: '#dialog',
    data() {
      return {
        form: {
          date: '',
          name: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '120px'
      }
    },
    props:['dates'],
    methods: {
      showdialog(){
        this.dates=this.from;
        this.dialogFormVisible=true;
      },
    }
  })
</script>
<script>
  Vue.component('tables',{
    template: '#templ',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  })
</script>
<script>
  var vm=new Vue(
          {
            el:"#app",
          }
  );
</script>
</body>
</html>