Vue 多层组件嵌套二种实现方式(测试实例)

2024-10-17 04:39:45

最近在研究vue组件的学习，给自己留个笔记，也分享给大家，希望能对大家有所帮助

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Vue 测试实例-组件嵌套二种方式</title>
 <script src="https://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>

<body>
 <div id="app">
  <Itemlist1>
    <Item v-for="item in items1" :data="item"/>
  </Itemlist1>

  <Itemlist2 :itemlist="items2"></Itemlist2>
 </div>
 <script>

 Vue.component('Item',{
  template: '<div>{{data.name}}</div>',
  props: {
    data:Object
  }

 });
 // 方式一：嵌套组件时用<slot></slot>,
 Vue.component("Itemlist1", {
  template: '<div @click="ok"><slot></slot></div>',
  props: {
   itemList: Array
  },
  methods: {
   ok: function() {
    alert(this.abc);
   }
  }
 });

 // 方式二：
 Vue.component("Itemlist2", {
  template: '<div @click="ok"><Item v-for="item in itemlist" :data="item"/></div>',
  props: {
   itemlist: Array
  },
  methods: {
   ok: function() {
    alert(this.abc);
   }
  }
 });

 // 创建根实例
 var vueApp = new Vue({
  el: '#app',
  data: {
   items1: [{
    'name': "item1"
   }, {
    'name': "item2"
   }, {
    'name': "item3"
   }],
   items2: [{
    'name': "item1-1"
   }, {
    'name': "item2-1"
   }, {
    'name': "item3-1"
   }]
  }
 })
 </script>
</body>

</html>

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

vue父子组件的嵌套的示例代码

本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t
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中组件的3种使用方式详解

前言组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码. 在vue angular react三大前端框架的大前端时代.许多人选择了vue,在 github 上的star,vue已经超过react的数量了.虽然star并不能代表vue更强,不过在发展速度上看来,vue确实很快. 在模块化的前端时代,万物皆组件,vue学习组件是必不可少的. 可是在大多数人熟悉了纯html.jq之后,在初次接触vue的组件时候,却是满脸蒙蔽. 今天咱们以最简单的方式,带vue小白童鞋们
vue动态子组件的两种实现方式

文章目录方式一:局部注册所需组件使用缓存方式二:动态注册组件实现让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <div id="example"> <button @click="change">切换页面</button> <component :is="curre
vue注册组件的几种方式总结

1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi
vue路由传参三种基本方式详解

这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r
详解Vue中组件传值的多重实现方式

vue中组件传值方式整理 1.我们最熟悉的父子组件传值父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值我们最常用的方式采用一个第三方变量俗称eventbus 通过其中一个$emit发另一个$on接收的方式实现组件传值 main.js中挂载一下在其中一个页面$emit 另一个页面
vue路由缓存的几种实现方式小结

本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 vue 路由缓存的几种方式. 1.全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了 2.缓存单个指定路
Vue中keep-alive的两种应用方式

Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了我创建了两个组件,可以相互切换组件1: 组件2: 第一种方式在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存此时路由设置完毕,keep-aliv
详解vue父子组件状态同步的最佳方式

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

相关推荐

随机推荐