vuex组件之间值传递效果代码
代码语言:html
所属分类:其他
代码描述:vuex组件之间值传递效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); :root { font-size: 16px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } #app { min-height: 100%; display: flex; flex-direction: column; } #app .parent, #app .split { display: flex; height: 50vh; } #app .parent { border-bottom: 1px solid #ddd; padding: 1rem; align-items: center; justify-content: center; text-align: center; flex-direction: column; } #app .parent small { color: #999; } #app .parent .editor { display: flex; align-items: center; margin-top: 1.5rem; } #app .parent .editor .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } #app .parent .editor input { border-top-right-radius: 0; border-top-right-radius: 0; } #app .split .child { width: 50%; padding: 1rem; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } #app .split .child:last-of-type { border-left: 1px solid #ddd; } #app .split .child h2 { font-weight: 400; } </style> </head> <body> <div id="app"> <div class="parent"> vuex实现组件之间的值传递效果 <editor></editor> </div> <div class="split"> <sibling-one class="child"></sibling-one> <sibling-two class="child"></sibling-two> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0