Vue基础（父子组件传值、兄弟组件传值、ref的使用、slot插槽）

最新推荐文章于 2024-05-29 17:42:35 发布

ZHANGJIN9546

最新推荐文章于 2024-05-29 17:42:35 发布

阅读量1.2k

点赞数

分类专栏：笔记文章标签： Vue基础（父子组件传值、兄弟组件传值、ref的使用、slot插槽）

本文链接：https://blog.csdn.net/ZHANGJIN9546/article/details/96202090

版权

组件

Vue.component(’组件名称’,’组件’)
组件包括：
template
data
methods
生命周期钩子函数
computed
watch
…….

1、父组件给子组件传值：

<ChildComponent title="我是子组件"></ChildComponent>

子组件用props接受：
第一种方式：
props:[‘title’] //数组方式接收
第二种方式（官方推荐）：
props:{
title:{
type:String //数据类型
required:true //是否必须传值，true：必须，false：可选
}
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件传子组件</title>
    <style> [v-cloak]{  display: none; } </style>
</head>
<body>
<div id="app" v-cloak></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    //子组件
    let HeaderComponent={
        template: `
            <div>
                我是<span style="font-size:16px;color: ed">{
  {title}}</span>头文件<br>内容:{
  {content}}
            </div>
        `,
       data(){
            return {
                name:"headerComponent"
            }
        },
        //接收父组件里面的值
        //方法一、数组传值
        props:['title','content'],
        //方法二、对象传值
      /*  props:{  //官方推荐
           title: {
               type: String,       //检查传值类型
               required: false  //是否必须有属性
           },
            content:{
               type: String,
                required: false
            }
        }*/
    };
    //父组件
    let HomePage={
        template:`
            <div>
                <HeaderComponent title="首页" content="首页内容"></HeaderComponent>
                首页
            </div>
        `,
        components: { //浏览器自动解析，key与值相等
            HeaderComponent
        }
    };
    //产品页面
    let GoodsPage={
        template:`
        <div>

最低0.47元/天解锁文章

ZHANGJIN9546

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（父子组件传值、兄弟组件传值、ref的使用、slot插槽）

组件Vue.component(’组件名称’,’组件’)组件包括：templatedatamethods生命周期钩子函数computedwatch…….1、父组件给子组件传值：<ChildComponent title="我是子组件"></ChildComponent>子组件用props接受：第一种方式：props:[‘title’] //数组...
复制链接

扫一扫