Vue·父子组件值传递

最新推荐文章于 2024-10-11 11:05:24 发布

青鸟遇鱼

最新推荐文章于 2024-10-11 11:05:24 发布

阅读量132

点赞数

分类专栏： S1-DD-前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43308318/article/details/125351598

版权

S1-DD-前端专栏收录该内容

12 篇文章

订阅专栏

本文演示了一个Vue应用中，如何在父组件与子组件之间传递数据。通过`props`属性，子组件接收并显示了父组件传递的`message`和`string`值。示例中创建了一个名为`login`的子组件，并在父组件`app`中使用，展示了Vue的组件化特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue·父子组件值传递

<!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>
    <!-- <script src='./js/vue2.js'></script> // 下载到本地使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
    <h2>普通的css布局实现项目</h2>
    <p>测试vue使用在项目中，不是整个项目用vue写的 局部使用</p>

    <!-- 使用vue -->
    <h3>父组件传值给子组件</h3>
    <hr>
    <hr>
    子组件获取父组件的值
    <template id="temp">
        <div>
        <h2>====Login====</h2>
        <p>==={{ mess }}===</p>
        <p>==={{ string }}===</p>
        </div>
    </template>
    <hr>
        
    <div id='app'>
        // 绑定组件1
         <login v-bind:mess="message"  v-bind:string="str"></login>  <!-- // 获取components定义的组件数据 v-bind:将变量值绑定到另一个名字上 -->  
       <!--  <p>获取vue数据 {{message}}</p> -->
 
    </div>
</body>
    <!-- 创建vue实例 -->
    <script>
        // 创建一个子组件(是一个函数)
        const login = {
            // 绑定组件
            //template:'<h2>LOGIN</h2>'
            template:'#temp',
            props:['mess','string']  // 注册挂载的组件元素

            }  
        // 父组件(是一个对象)
        const vm = new Vue({
            el: '#app', // 获取element元素
            components: {
                login 
            },
            data: {     // data的数据可以在标签中使用{{变量名}} 获取到
                message: '我是父组件的数据',
                str: '又下雨了',
                arr: [1,2,3]
            }
        })

    </script>
</html>