目录：

1：父组件向子组件传值，通过属性绑定的方式。

2：父组件向子组件传方法，通过事件绑定的方式 。

3：通过ref来获取Dom元素

1：父组件向子组件传值，通过属性绑定的方式

1.1：父组件声明数据

1.2：子组件声明属性

<script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "这是父组件中的数组",
            },
            components : {
                tem : {
                    template : "#tem",
                    // 这是从父组件中传递过来的数据，这里的数据是只读的。
                    props : [
                        "parentmsg",
                    ],
                    data(){ // 子组件中的数据，是子组件私有的，不是父组件传递过来的，
                            // 比如从ajax请求过来的数据。这里的数据是可读可写的
                        return {
                            title : "1234",
                        };
                    }
                },
            
            },
        });
    </script>

1.3：子组件引用的使用绑定属性

<div id="app">
        <tem v-bind:parentmsg="msg"></tem>
    </div>
    <template id="tem">
        <h1>这是子组件~~{{parentmsg}}</h1>
    </template>
 
 

2：父组件向子组件传递事件

<body>
    <div id="app">
        <!-- 2:绑定父组件方法到子组件中 -->
        <tem @func="show"></tem>
    </div>
    <template id="tem">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="子组件中的方法" @click="myclick">
        </div>
        
    </template>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "这是父组件中的数组"
            },
            methods : {
                // 1:声明父组件方法
                show(arg){
                    console.log(arg)
                }
            },
            components : {
                tem : {
                    template : "#tem",
                    methods : {
                    // 4:调用子组件方法
                    myclick(){
                        // 3:声明子组件方法
                        this.$emit("func", "123");
                    }
                }
                },
                
            },
        });
    </script>
</body>
 
 

3:ref获取dom元素和组件。

<body>
    <div id="app">
        <h2 ref="myh2">我是h2标签</h2>
        <input type="button" value="点击" @click="myclick">
    </div>
    <script>

var vm = new Vue({

            el : "#app",
            data :{
            },
            methods : {
                myclick(){
                    console.log(this.$refs.myh2.innerText);
                },
            }
        });
    </script>
    
</body>
 
 
 
4：路由四部曲
1：导包
2：定义路由规则
3：挂载到Vue实例中
4：显示在html元素里
<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
 
    <script>
        var login = {
            template :"<h3>登陆组件</h3>", 
        };
        var register = {
            template : "<h3>注册组件</h3>",
        }
        var router = new VueRouter({
            routes : [
                {path : "/", component: login},
                {path : "/login", component: login},
                {path : "/register", component : register},
            ],
        });
        var vm = new Vue({
            el : "#app",
            data : {
            },
            router : router,
        });
    
    
    </script>
</body>

04 (H5*) Vue第四天的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. 总结Vue 第四天：vue-cli（Vue2.0 新手入门 — 从环境搭建到发布）

    总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■   CLI是Command-Lin ...

  3. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  4. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  5. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  6. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  7. 从后端到前端之Vue（四）小试牛刀——真实项目的应用（树、tab、数据列表和分页）

    学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...

  8. PHP 将数据从 Laravel 传送到 vue 的四种方式

    在过去的两三年里,我一直在研究同时使用 Vue 和 Laravel 的项目,在每个项目开发的开始阶段,我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ?”.这适用于 Vue 前端组件 ...

  9. 前端笔记之Vue（四）UI组件库&Vuex&虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...

随机推荐

  1. testng学习笔记-- 场景和module

    一.定义 TestNG是一个测试框架,其灵感来自JUnit和NUnit,但引入了一些新的功能,使其功能更强大,使用更方便. TestNG是一个开源自动化测试框架;TestNG表示下一代(Next Ge ...

  2. app登录接口请求报：“签名验证失败”？？？已解决

    根据抓包数据获得url.param.header,在charles中compose请求结果为成功,在pycharm中运行则报:“签名验证失败”. 运行结果:

  3. Mybatis-Spring扫描路径有重叠导致Invalid bound statement(not found)问题

    背景 近日,某个系统的测试环境mybatis总是报Invalid bound statement(not found)异常,导致tomcat容器无法启动.异常信息如下: org.apache.ibat ...

  4. native-echarts 问题总结

    一.当width 和 height 设置的不对的时候,会出现边框线如图所示: 解决办法:Echarts/index.js文件中 <WebView ref="chart" sc ...

  5. （springboot）自定义Starter

    要引入的jar项目,即自定义的Starter项目: pom:(这里不能引入springboot整合否则测试项目注入失败) <?xml version="1.0" encodi ...

  6. windows和linux下的本机IP的获取(亲测有效)

    package com.handsight.platform.fras.util; import org.apache.log4j.Logger; import javax.servlet.http. ...

  7. tesseract4.0：win10 +x64+vs2015 源码安装（ViewerDebugging）安装记录

    参考文章: https://blog.csdn.net/u013985291/article/details/78295789 https://blog.csdn.net/u013985291/art ...

  8. think in java 泛型

    曾几何时,我们对java的泛型充满了好奇,但是感觉用起来有很爽,但又会在spring类型泛型的地方,遇到问题. 我第一次的遇到泛型是在使用别人的BaseDao的时候,这是一个java封装hiberna ...

  9. HTML5实时语音通话聊天，MP3压缩传输3KB每秒

    目录 一.把玩方法 二.技术特性 (1)数据传输 (2)音频采集和编码 (3)音频实时接收和播放 三.应用场景 自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上 ...

  10. 点击任意位置关闭（CocosCreator）

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321  我的个人博客       今天,接触到一个新功能,当弹出某个弹框时,需要点击除弹框的剩余任意位置,来关闭该弹框,例如:当红框内 ...