父传子cpn8-props-father2child

最新推荐文章于 2022-07-17 19:40:44 发布

原创最新推荐文章于 2022-07-17 19:40:44 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

Vue前端开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个Vue.js应用案例，展示了如何通过属性传递实现父组件向子组件的数据传输，并演示了插槽(slot)的使用方法来增强组件间的交互。此示例中，父组件将电影列表和消息字符串传递给子组件，并在子组件模板中渲染这些数据。

父传子，同时支持插槽

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn v-bind:cmovies="movies" :cmessage="message">
    <button>这是插槽1</button>
  </cpn>
</div>
<template id="tp1">
  <div>
    
    <h2> {{cmessage}} </h2>
<!--     {{cmovies}}-->
    <ul>
      <li v-for="movie in cmovies">
          {{movie}}
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

<script src="../vue.js"></script>
<script>
  const cpn = {
    template:"#tp1",
    //1、数组方式定义变量
    // props:['cmovies']
    
    //2、json对象方式定义变量
    props:{
      //类型限制
      // cmovies:Array,
      // cmessage:String,
      //提供一些默认值
      cmovies:{
        type:Array,
        //对象和数组的默认值必须是函数返回值
        default(){
          return ["流浪地球","西游记"];
        }
      },
      cmessage:{
        type:String,
        default:"默认标题"
      }
      
    },
    mounted(){
       console.log("子组件的消息：",this.cmovies);
    }
    
  }
  
  const app = new Vue({
    el:'#app',
    components:{
      cpn,
    },
    data:{
        message:"你好啊",
        movies:["甄嬛传","雍正王朝","妻子的浪漫旅行2"]
    },
    methods:{},
    created(){
        console.log("生命周期钩子函数，Vue实例已创建")
    }
  })
</script>

</body>
</html>