Vue之父组件向子组件传值

2021/9/14 6:08:21

编程Tag： vue 组件 props pstr pboo 向子 pobj

本文主要是介绍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>父组件向子组件传值</title>
</head>

<body>
    <div id="app">
        <div>{{pmsg}}</div>

        <menu-item title="来自父组件的值"></menu-item>
        <menu-item :title="ptitle" content='hello'></menu-item>
        <menu-item1 :pstr='pstr' :pnum='12' pboo='true' :parr='parr' :pobj='pobj'></menu-item1>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.component('menu-item', {
        //子组件用属性props接收父组件传递过来的数据
        props: ['title', 'content'],
        data: function () {
            return {
                msg: '子组件本身的数据'
            }
        },
        template: '<div>{{msg+"---"+title+"---"+content}}</div>'
    });
    Vue.component('menu-item1', {
        props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
        template: `
        <div>
            <div>{{pstr}}</div>
            <div>{{12+pnum}}</div>
            <div>{{typeof pboo}}</div>
            <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
            </ul>
            <span>{{pobj.name}}</span>
            <span>{{pobj.age}}</span>
        </div>
        `

    })
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父组件内容',
            ptitle: '动态绑定属性',
            pstr: 'hello',
            parr: ['apple', 'orange', 'banana'],
            pobj: {
                name: 'lisi',
                age: 12
            }
        }
    });
</script>

</html>

这篇关于Vue之父组件向子组件传值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue之父组件向子组件传值

相关编程文章