Vue中组件间传值常用的几种方式

墨蓝 2023-10-01 17:18 16阅读 0赞

主要分为两类：

1.父子组件间的传值

2.非父子组件间的传值

1.父子组件间传值

父组件向子组件传值

第一种方式:

props

父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象如图

父组件代码

\`\`\`

传递多个值

<!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>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app">
            
            <blog-content></blog-content>
        </div>
        <script>
            const vm = Vue.createApp({
        });
            //创建组件；
            vm.component('blog-content', {
        
                //使用blog-title组件，并传递content
                template: '<div><blog-title :name="name" :price="price" :num="num"></blog-title></div>',
                data: function () {
        
                    return {
         name: '苹果', price: "6.88元", num: "2800公斤" }
                }
            });
            //注册子组件;
            vm.component('blog-title', {
        
                props: ['name', 'price', 'num'],
                template: '<ul><li>{
        {name}}</li><li>{
        {price}}</li><li>{
        {num}}</li></ul>'
            })
            //指定在dom的元素上装载应用程序实例的根组件;
            vm.mount('#app');
        </script>
    </body>
    
    </html>