组件之间使用Prop传递数据

<div id="example">
    <father></father>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">

    Vue.component(‘child‘, {
        props: [‘myMessage‘],
        template: ‘<div>{{myMessage}}<input v-model="counterMessage"></div>‘,
        computed: {
            counterMessage: function () {
                return this.myMessage.trim().toLowerCase()
            }
        }
    })

    Vue.component(‘father‘, {
        template: ‘            <div>                <div>{{parentMsg}}</div><br><child :my-message="parentMsg"></child>            </div>‘,
        data: function () {
            return {
                parentMsg: ‘ a22 asdasdasd sdasdAS asdAS ‘
            }
        }
    });

    new Vue({
        el: ‘#example‘
    })

</script>
时间: 2024-10-29 19:09:09

组件之间使用Prop传递数据的相关文章

Vue 爬坑之路(二)—— 组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

vue组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

Vue2.x 兄弟组件之间的数据传递

兄弟组件之间的数据传递 思路:创建三个组件分别是<my-aaa>.<my-bbb>.<my-ccc>,在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据,当改变<my-aaa>或<my-bbb>所发送的数据时,<my-ccc>接收的数据也随之改变 html <body> <div id="box"> <my-aaa></

Android 学习之路 1:Activity之间传递数据的四种方式

传递数据 新建 Activity 在项目中右键,选择 New,继续选择中下方的 Activity,最后是 Blank Activity. 此时 Android Studio 会为我们自动添加一个对应的布局文件,为布局文件中的 TextView 添加 ID,以便后续使用. 用Intent 发送数据 在主布局文件中新建一个 Button 控件,并在主类中定义它,然后为它设置 Click 的监听事件. Button button; @Override protected void onCreate(B

Android 学习之路 1:如何在Activity之间传递数据

传递数据 新建 Activity 在项目中右键,选择 New,继续选择中下方的 Activity,最后是 Blank Activity. 此时 Android Studio 会为我们自动添加一个对应的布局文件,为布局文件中的 TextView 添加 ID,以便后续使用. 用Intent 发送数据 在主布局文件中新建一个 Button 控件,并在主类中定义它,然后为它设置 Click 的监听事件. Button button; @Override protected void onCreate(B

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

vue组件之间值传递四种方法汇总

1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }}</h3> </div></template> <script>export default { name: 'cx', data () { return { zz: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX' } }, methods: {

vue组件之间8种组件通信方式总结

本文链接:https://blog.csdn.net/zhoulu001/article/details/79548350 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }

WEB组件之间的关系

WEB组件之间的关系: A:重定向的特点: 1:发生客户端 2:地址栏发生变化 3:两个WEB组件不共享request的数据. 服务端的方法:response.sendRedirect(); 服务端的方法:response.sendRedirect("相对路径");   相对路径 request.getContextpath+"路径" 客户端的方法: window.location.href='URL地址' B:请求转发: request.getRequestDis