vue如何将父组件所有的props传递给子组件

简介: vue如何将父组件所有的props一次性传递给子组件<Child v-bind='$props'></Child>demo如下:

vue如何将父组件所有的props传递给子组件


vue如何将父组件所有的props一次性传递给子组件


<Child v-bind='$props'></Child>


demo如下:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="app">
  <h2>props细节</h2>
  <Father name="csx" age=18></Father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  Vue.component('Father',{
    props: ['name', 'age'],
    data(){
      return {
        aa: 'asdfadfad'
      }
    },
    template: "<Child v-bind='$props'></Child>"
  })
  Vue.component('Child',{
    props: ['name', 'age'],
    template: "<div>child  name: {{name}} - age: {{age}}</div>"
  })
  new Vue({
    el: '#app'
  });
</script>
</body>
</html>
目录
相关文章
|
2天前
|
JavaScript 前端开发
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
|
1天前
|
JavaScript 前端开发 API
技术好文:vue混入(mixin)的使用
技术好文:vue混入(mixin)的使用
|
1天前
|
移动开发 JavaScript 程序员
程序员必知:vue播放video插件vue
程序员必知:vue播放video插件vue
|
1天前
|
JavaScript 程序员
程序员必知:vue中按钮使用v
程序员必知:vue中按钮使用v
|
1天前
|
JavaScript
Vue学习系列(二)——组件详解
Vue学习系列(二)——组件详解
|
2天前
|
JSON 资源调度 JavaScript
|
2天前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
|
2天前
|
JavaScript
vue基础概念(1)
vue基础概念(1)
6 0
|
2天前
|
JavaScript
vue父子组件传值,父组件内容更新子组件内容不实时更新
vue父子组件传值,父组件内容更新子组件内容不实时更新
9 0
|
2天前
|
前端开发 JavaScript
vue+el-select下拉多选实现,全选,反选,清空功能源码
vue+el-select下拉多选实现,全选,反选,清空功能源码
5 0