vue2中component父子组件传递数据props的使用

子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项。

组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据。修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改。

现在是传递对象的语法 app.vue(父组件):

<style scoped lang=‘stylus‘>

</style>
<template>
    <div>
        <h1>我是app组件</h1>
        <zujian :data="data"></zujian>
    </div>
</template>
<script>
    import zujian from ‘./components/zujian.vue‘
    export default{
        data(){
            return{
                data:{
                    a:1
                }
            }
        },
        components:{
            zujian
        }
    }
</script>

zujian.vue(子组件):

<template>
    <div>
        <h1>{{data.a}}</h1>
        <button @click="jia">+</button>
    </div>
</template>
<script>
    export default{
        props:["data"], // 父亲传 谁用谁接受(儿子接受)
        data(){
            return{

            }
        },
        methods:{
            jia(){
                console.log(this.data);
                this.data.a++;
            }
        }
    }
</script>
时间: 2024-10-25 02:47:22

vue2中component父子组件传递数据props的使用的相关文章

VUE中父组件向子组件传递数据 props使用

VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent"> <ul> <li v-for="item in fatherdatas">{{item}}</li> <!--父组件可以访问它自己的数据--> </ul> <child-component></chi

vue 父子组件传递数据

单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 //用data来解决不能修改父组件传递的数据的问题, // 我们新增一个number保存父组件传递过来的数据,这样就可以修改数据的值了 data:function(){ return { number: this.count } }, 数据就可以修改了: methods:{ handleclick:f

总结一下微信小程序中父子兄弟组件传递数据

常规的这种写法就是父组件在向子组件传递数据 子组件向父组件传递数据主要通过监听事件 比如like点赞功能触发了一个like事件 父组件通过绑定like事件来监听 对应事件: 原文地址:https://www.cnblogs.com/rmty/p/10914342.html

Vue2.x中的父子组件相互通信

原理 在 Vue.js 中,父子组件的关系可以总结为 props down, events up . 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.看看它们是怎么工作的. 业务场景 这里指的是直接父子级关系的通信 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <

vue组件-#构成组件-父组件向子组件传递数据

组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件. 在 Vue.js 中,父子组件的关系可以总结为 props down, events up . 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息. 看看它们是怎么工作的.        

(尚043) vue_向路由组件传递数据+vue param和query两种传参方式

效果展示: ============================================================================ 应写成下图这种形式: :id为占位 现在是通过什么路径向路由组件传递数据的? 通过请求参数${message.id}传递的 请求参数有两种: 1).Param 2).Query  (?后面,类似于get) ================================================================

vuejs子组件向父组件传递数据

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="

vuejs父子组件的数据传递

在vue中,父组件往子组件传递参数都是通过属性的形式来传递的 <div id='root'> <counter :count = '1'></counter> <counter :count = '2'></counter> </div> <script> var counter = { props:['count'], template:'<div>{{count}}</div>' } var v

vue 中父子组件传值:props和$emit

1 父组件向子组件传值:通过props数组: //父组件 App.vue <template> <div id="app"> <hello mes-father="爸爸无可奉告"></hello> </div> </template> //子组件Hello.vue <template> <div class="hello"> <p>{{me