vue给子组件增加html内容(称为插槽 slot)

插槽给子组件增加内容,插槽可以设置默认值

在子组件中template中插槽写法 <slot></slot>

slot标签内可以添加name属性,要与html中的slot值对应起来

(要是子组件html之间没有写内容,又想显示某个值,可以使用slot默认值:<slot>默认值</slot>)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <body-content>
        <div slot="header">header</div>
        <div slot="footer">footer</div>
      </body-content>
    </div>
    <script>
      Vue.component("bodyContent",{
        template:`<div>
                    <slot name=‘header‘></slot>
                    <div>content</div>
                    <slot name=‘footer‘></slot>
                  </div>`
      });
      var app = new Vue({
        el:‘#app‘
      })
    </script>
  </body>
</html>

原文地址:https://www.cnblogs.com/feiyangyao/p/11167048.html

时间: 2024-11-09 04:42:32

vue给子组件增加html内容(称为插槽 slot)的相关文章

Vue 给子组件传递参数

Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div class="row"> <div class="col-sm-12"> <h3>My Components</h3> <todo-item :todos="todos01"></todo-item

react通过父组件渲染子组件中的内容

说明: 代码: // less require ('./static/less/index.less') // 核心 var React = require('react') var ReactDom = require('react-dom') var ReactRouter = require('react-router-dom') var Router = ReactRouter.BrowserRouter var Route = ReactRouter.Route var Link =

vue/cli子组件style中如何使用全局图片路径

原文地址:https://www.cnblogs.com/sugartang/p/11277737.html

vue子组件向父组件传值

vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div> <childComp01 :fromParentToChild="fromParentToChild" :isShow="show" @showParentComp="eventFromChild"></childComp

vue 实现,子组件向父组件 传递数据

首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. 先写子组件: 绑定一个单击事件 <el-button type="primary" icon="el-icon-search" @click="search" style="background: #5b6270;

Vue中,父组件向子组件传值

1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 原文地址:https://www.cnblo

Vue 父组件与子组件之间传值

一.父组件与子组件之间值传递步骤如下: 例如:我有一个父组件Myhome.vue 和一个子组件Header.vue 1.父组件调用子组件的时候,动态绑定属性值 <v-myheader :title="title"></v-myheader> 2.在子组件使用 props 来接受父组件传过来数据(props:['title']),如果是多个就定义多个属性就可以 完整代码如下: 1.Myhome.vue(父组件)代码如下: <template> <

初识vue 2.0(13):子组件使用watch监听父组件变化

子组件使用created或者mounted通常只能在组件初始化的时候,获取父组件传过来的props数据. 父组件props数据发生变化,子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能. 一般的值类型数据,可以直接使用watch监听: watch: { msg(newVal, oldVal){//对引用类型的值无效 console.info('value changed ', newVal) } } 引用类型,普通watch方法,无法监听到引用类型内部的变化. 解决此问题,可以在父

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子