Vue 父组件向子组件传值

最新推荐文章于 2023-07-15 00:20:26 发布

Seric.

最新推荐文章于 2023-07-15 00:20:26 发布

阅读量7.2k

点赞数 5

分类专栏： Vue 组件通信 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Seric_xiao/article/details/120442171

版权

当我们将整个页面都拆分了不同的组件以后，这样就会涉及到组件之间的数据传递问题。

常见的组件的通信可以分为三类：

第一类: 父组件向子组件传递数据

第二类: 子组件向父组件传递数据

第三类：兄弟组件的数据传递。

下面，我们先来看一下父组件向子组件传递数据的情况

第一：子组件内部通过props接收传递过来的值。

Vue.component('menu-item',{
 props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做属性类使用。
 template:'<div>{
  {title}}</div>'   
})

第二: 父组件通过属性将值传递给子组件

<menu-item title="向子组件传递数据"> </menu-item>
<menu-item :title="title"></menu-item> <!--可以使用动态绑定的方式来传值-->

下面看一下具体的案例演示：

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        // 创建一个父组件
        Vue.component('father', {
            // 2、在使用子组件的地方，通过v-bind指令来给子组件中的props赋值。
            template: '<div><p>我是父组件</p><son :myName="mySonName"></son></div>',
            data() {
                return {
                    mySonName: '小强'
                }
            },
            components: {
                // 创建一个子组件
                // 1.声明props,它的作用是：用来接收父组件传递过来的数据。
                // props可以跟一个数组，数组里面的内容可以是字符串，这个字符串可以当属性来使用。
                son: {
                    props: ['myName'],
                    template: '<p>我是子组件,我的名字叫{
  {myName}}</p>'
                }
            }
        })
        var vm = new new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

下面我们在看一个例子，这个例子是前面我们写的关于局部组件的案例，我们在这个案例的基础上实现组件的传值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>局部组件</title>

最低0.47元/天解锁文章

Seric.

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 父组件向子组件传值

当我们将整个页面都拆分了不同的组件以后，这样就会涉及到组件之间的数据传递问题。常见的组件的通信可以分为三类：第一类: 父组件向子组件传递数据第二类: 子组件向父组件传递数据第三类：兄弟组件的数据传递。下面，我们先来看一下父组件向子组件传递数据的情况第一：子组件内部通过props接收传递过来的值。Vue.component('menu-item',{ props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做属性类使用。 temp
复制链接

扫一扫