Vuejs slot插槽(显示子组件标签下的内容)
2018-11-02 18:42
676 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id = "myApp">
<sayto pname = "koma">我是koma</sayto>
<sayto pname = "haohao">我是haohao</sayto>
<sayto pname = "vue">我是vue</sayto>
</div>
<script>
Vue.component('sayto',{
props:['pname'],
template:'<div>'
+ 'nihao,<strong>{{pname}}</strong>!'
+ '<slot></slot>'
+ '</div>',
});
var myApp = new Vue({
el:"#myApp",
});
</script>
</body>
</html>
阅读更多相关文章推荐
- Vuejs——(11)组件——slot内容分发
- Vuejs组件——slot内容分发
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- Vuejs组件——slot内容分发
- Vuejs组件之slot内容分发实例详解
- Vuejs——(11)组件——slot内容分发
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
- 常用js框架之vue.js(深入四:组件2,slot内容分发,编译作用域,动态切换组件)
- vue组件中插槽slot
- JS根据表单中的选项,自动生成span标签后显示选中的内容
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- angularjs ng-if表达式为true的情况下标签仍不显示内容
- vue动态组件和slot插槽
- vue.js,table标签(表格)使用过度transition组件出错
- vue-cli 父子组件插头传递 标签slot 应用
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- Vue.js中组件中的slot实例详解
- Vue.js 点击按钮显示/隐藏内容 实例
- vue.js之slot插槽
- Vue 2.0学习笔记:Vue组件内容分发(slot)