详解vue父子模版嵌套案例

2024-12-08 12:22:57

这里是父子模版的调用

这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档

vue-router2.0： https://router.vuejs.org/zh-cn/essentials/getting-started.html

第一种，子组件模版直接写在js里

//定义模版挂载点my-component
<div id="exampleBox1">
  <com-ponent></com-ponent>
</div>
<script src="../vue/node_modules/vue/dist/vue.js"></script>
<script>
  var Component = Vue.extend({// 定义
  template: '<div>A custom component!</div>',
  data: function () {
    return {
      name: 'yuxie'
    }
  }
});
Vue.component('com-ponent', Component);// 注册
//注意，extend(json) 和 vue.component('com-ponent', json)//这两个JSON是相等的。
//所以下面第二种会将extend()函数省略掉，直接在component中定义，系统会自动调用extend函数。
  var conp = new Vue({// 创建根实例
    el: '#exampleBox1'
   });
</script>

第二种，使用HTML模版

<!-- 父组件模板 -->
<div id="exampleBox2" style="border:1px solid #ccc;width:500px;">
  <div>{{parent.name}}</div>
  <!--模版挂载标识-->
  <children></children>
</div>
<!-- 子组件模板 -->
<template id="child-template">
  <p style="background:#eee;">{{text}}</p>
</template>
<script>
Vue.component('children', {//child是模版挂载的标签名
   template: '#child-template',//id对应子组件的ID
   data: function () {
     return {
       text: '这里是子组件的内容'
     }
   }
});
var parent = new Vue({// 初始化父组件
    el: '#exampleBox2',
    data: {
      parent: {
         name:'这里是父组件的内容'
      }
     }
 })
</script>

第三种、来一个复杂的

<div id="example">
  <!--  所有的模板挂件，都必须在根实例ID内部，否则找不到挂件  -->
  <my-component></my-component>
  <!-- 模版可以重用多次 ···· 只不过一样的东西没有这个必要 -->
  <child></child>复用一次
  <child></child>复用二次
  <child></child> ···
  <child></child> ···
</div>
<!--比如放在这里是找不到的-->
<child></child>
<script src="../vue/node_modules/vue/dist/vue.js"></script>
<script>
//定义子组件，子组件必须在父组件之前定义。
var Child = Vue.extend({template: '<div>A child component!</div>'});
//定义父组件
var Parent = Vue.extend({
  template: '<div style="border: 1px solid #ccc;width:200px;">Parent<child-component></child-component>父模版内部</div>',
     components: {
       // 调用子组件
       'child-component': Child
     }
  });
  // 注册父组件
  Vue.component('my-component', Parent);
  //复用子组件。
  Vue.component('child', Child);
  // 创建根实例，所有组件都需要在根实例之前创建。
  new Vue({
    el: '#example'
  })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue-router：嵌套路由的使用方法

模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>.  <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路
vue 2.0路由之路由嵌套示例详解

前言 vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍. 方法如下: 1.引入依赖库就不必再说 2.创建组件两种写法第一种:间接 <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> var About = Vue.extend({ te
Vue 多层组件嵌套二种实现方式(测试实例)

最近在研究vue组件的学习,给自己留个笔记,也分享给大家,希望能对大家有所帮助 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例-组件嵌套二种方式</title> <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> &
VUE多层路由嵌套实现代码

先看看效果图: 例如:在做系统时,主页面有两个功能[home]and[news],在[home]下又分为登录和注册. 首先需要将各种模板进行抽离.定义模板 <template id="home"> //home模板,里面含子视口 <div> <router-link to="/home/login">登录</router-link> <router-link to="/home/zhuce"&
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

前言最近练习Vue,看到官方文档中的嵌套路由,不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅. demo截图: Demo简单介绍主路由:Top250(charts),正在热映(hot),即将上映(ing),新片榜(newmovie) const router = new VueRouter({ routes: [ { path: '/', //设置默认路由为Top250 compon
详解vue嵌套路由-query传递参数

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app">  <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo
Vue实现路由跳转和嵌套

一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h
详解vue嵌套路由-params传递参数

在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app">  <router-view></router-view> </div> main.js params传值是通过 :[参数值]
vue动态路由实现多级嵌套面包屑的思路与方法

前言最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0
详解vue父子模版嵌套案例

这里是父子模版的调用这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 :http://vuefe.cn/guide/ vue-router2.0: https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种,子组件模版直接写在js里 //定义模版挂载点my-component <div id="exampleBox1"> <com-ponent></co
详解vue父子组件状态同步的最佳方式

哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接
详解vue父子组件间传值(props)

先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
详解vue父子组件关于模态框状态的绑定方案

日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">
详解vue 模版组件的三种用法

本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&
详解vue route介绍、基本使用、嵌套路由

目录前言一.介绍.安装 1.定义 2.安装二.基本使用(代码后赋) 三.嵌套路由 1.布局逻辑 2.效果展示 3.代码四.注意前言想要学习完整内容请关注主页的专栏————>Vue学习本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分一.介绍.安装 1.定义 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换) 路由器:route
详解vue组件基础

什么是组件组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}
详解vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet
详解vue组件之间相互传值的方式

概述我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

详解vue父子模版嵌套案例

相关推荐

随机推荐