vue3.0 js 使用prop属性向子组件传递数据

张哥编程

发布于 2024-12-19 08:47:24

5200

<!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>使用prop属性向子组件传递数据</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <blog-content date-title="庭院深深几许,云窗雾阁春迟"></blog-content>
        <blog-content v-bind:date-title="content"></blog-content>
    </div>
    <script>
        //创建一个应用程序实例;
        const vm = Vue.createApp({
            data() {
                return {
                    content: '玉瘦檀轻无限恨，南楼羌管休吹'
                }
            }
        });
        //设置组件
        vm.component('blog-content', {
            props: ['dateTitle'],
            //date-title就像data定义的数据属性一样;
            template: '<h3>{{dateTitle}}</h3>',
            //在该组件可以使用"this.dateTitle"这种形式调用prop属性;
            created() {
                console.log(this.dateTitle);
            }
        });
        //在指定的DOM元素上装载应用程序实例的根组件;
        vm.mount('#app');
    </script>
</body>

</html>

1、父子组件间的通信

子组件不应该直接向服务器请求数据
顶层组件请求数据之后，再向子组件传递数据（通信）
父向子：通过props（属性）父组件向子组件传递数据
子向父：通过事件子组件向父组件发送消息

2、props基本用法

1、在顶层vue实例中（父组件）创建需要用于传递的数据，并注册一个子组件cpn3、props值的两种方式
props值有两组方式，
方式1：字符串数组，数组中的元素就是传递的值就是传递时的名称方式2：对象，对象可以设置传递时的类型，也可以设置默认值当需要对props进行类型等验证时，就需要对象写法了支持验证的类型包含： string number boolean array object date function symbol

4、props驼峰标识写法