<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id='app'>

    <!--这里的作用是将父组件渲染到页面上-->

    <father></father>

</div>

</body>

<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>

<script type="text/x-template" id="father">

    <div>

        <!--这里实现一个双向绑定-->

        <!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑-->

        <input v-model="parentMsg">

        <br>

        <child :my-message="parentMsg"></child>

    </div>

</script>

<script type="text/x-template" id="child">

    <div> {{'父组件传递的数据为：'+ myMessage }} </div>

</script>

<script>

    Vue.component('father',{

//        这里我直接把template写到前面script标签中了，写在这里一大坨，难看

        template:'#father',

        data:function(){

            return {

                parentMsg:''

            }

        }

    });

    //在 Vue 中，父子组件的关系可以总结为 props down, events up。

    // 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

    Vue.component('child', {

        props: ['myMessage'],//这里的props选项是用来实现父子组件的通信的，传递下来的消息字组件用花括号接住

        template: '#child'

    });

    new Vue({

        el:'#app'

    })

</script>

</html>

vue.js父子组件通信动态绑定的更多相关文章

  1. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  2. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  3. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  4. Vue的父子组件通信（转载）

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  5. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  6. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  7. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

  8. vue(三)-父子组件通信

    原因 :  Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props  父组件给子组件传递数据 props:作用是父组件给 ...

  9. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

随机推荐

  1. 02Spring基于xml的IOC配置--实例化Bean的三种方式

    maven依赖 <dependencies> <!--IOC相关依赖--> <dependency> <groupId>org.springframew ...

  2. 创建node节点的kubeconfig文件

    创建node节点的kubeconfig文件 1.创建TLS Bootstrapping Token export BOOTSTRAP_TOKEN=$(head -c 16 /dev/urandom | ...

  3. nginx（五）- linux下安装nginx与配置

    linux系统为Centos 64位 准备目录 [root@instance-3lm099to ~]# mkdir /usr/local/nginx [root@instance-3lm099to ~ ...

  4. vue-复制功能插件-兼容性最好的插件

    记录给自己用,不进同一次坑: https://github.com/Inndy/vue-clipboard2

  5. HashMap原理探究

    一.写随笔的原因:HashMap我们在平时都会用,一般面试题也都会问,借此篇文章分析下HashMap(基于JDK1.8)的源码. 二.具体的内容: 1.简介: HashMap在基于数组+链表来实现的, ...

  6. 关于Java中线程取值并返回的方法

    如何让一个线程不断跑起来,并且在取到值的时候能返回值而线程能继续跑呢? 我们都知道可以用Callable接口获得线程的返回值,或者触发事件监听来操作返回值,下面我将介绍另一种方法. public ab ...

  7. 使用 SignalR 实现推送功能

    百度搜索:使用 SignalR 实现推送功能

  8. 微擎后台进行GET提交

    微擎form表单进行GET提交时,要传递 name 分别为 c , a , m , do 的值 例如: <form action="{php echo $this->create ...

  9. HDU - 6582 Path (最短路+最小割)

    题意:给定一个n个点m条边的有向图,每条边有个长度,可以花费等同于其长度的代价将其破坏掉,求最小的花费使得从1到n的最短路变长. 解法:先用dijkstra求出以1为源点的最短路,并建立最短路图(只保 ...

  10. 完整的IT项目开发流程

    一般情况下,企业开发软件时会按照基线和定制两块并行方式执行项目开发工作.无论什么公司,都需要遵从一套成熟的产品研发过程体系,才能做出质量较好的产品.因此,如果出现项目较多的情况,应该合理地安排基线和定 ...