vue组件传值----- 父组件给子组件传值

最新推荐文章于 2023-06-08 11:24:40 发布

初来乍到到

最新推荐文章于 2023-06-08 11:24:40 发布

阅读量257

点赞数

分类专栏： Vue 文章标签： vue vue传值

本文链接：https://blog.csdn.net/weixin_43868692/article/details/85624187

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

父组件给子组件传值

首先我们定义两个组件

1.一个父组件和一个子组件。

2.在子组件标签中绑定自定义属性名，值为父组件传送的值。

3.子组件内部通过props，以数组的形式来接收书属性名---属性名指的是传送数据的变量。

下面就是小案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>   父组件给子组件传值</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="box">
            <my-a></my-a>
        </div>

        <template id="banner">
            <div>
                <h1 >这是父组件</h1>
                <button @click="tap()">点击传值</button>
                <my-b :name="str1"></my-b>
            </div>
        </template>

        <template id="footer">
            <div>
                <h3>这是子组件</h3>
                <p>这是父组件传过来的值---{{ name }}</p>
            </div>
        </template>
    </body>
    <script type="text/javascript">
        const Footer = {
            template:"#footer",
            props:['name']//接收传送过来的数据
        }

        const Banner = {
            template:"#banner",
            components:{
                "my-b":Footer
            },
            data(){
                return{
                    str:"传送的数据",
                    str1:'',
                }
            },
            methods:{
                tap(){
                    this.str1 = this.str
                }
            }
        }

        const app = new Vue({
            el:"#box",
            components:{
                "my-a":Banner
            }
        })
    </script>
</html>

初来乍到到

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件传值----- 父组件给子组件传值

父组件给子组件传值首先我们定义两个组件1.一个父组件和一个子组件。2.在子组件标签中绑定自定义属性名，值为父组件传送的值。3.子组件内部通过props，以数组的形式来接收书属性名---属性名指的是传送数据的变量。下面就是小案例:<!DOCTYPE html><html> <he...
复制链接

扫一扫

专栏目录