Vue总结

最新推荐文章于 2024-04-01 14:43:41 发布

weixin_37795553

最新推荐文章于 2024-04-01 14:43:41 发布

阅读量179

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_37795553/article/details/103624080

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue总结

vue组件用法

简单说就是生子, 挂子, 用子

<!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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
  </div>
  <!-- 1.引包 -->
  <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
  <!-- 2.创建实例对象 -->
  <script type="text/javascript">
    // 生子
    var App = {
      template:`
        <div>
          入口组件
        </div>
      `
    }
    new Vue({
      el:'#app',
          data(){
	        return {
	
	        }
      },
      components:{
        // 挂子
        App
      },
      // 用子
      template:`
        <App />
      `
    })
  </script>
</body>
</html>

局部组件的使用实例

    var VAside = {
      template:`
        <div>Aside</div>
      `
    }
    var VContent = {
      template:`
        <div>Content</div>
      `
    }
    var VHeader = {
      template:`
        <div>Header</div>
      `
    }
    var App = {
      components:{
        VHeader,
        VAside,
        VContent
      },
      template:`
        <div>
          <VHeader />
          <span><VAside /></span>
          <span><VContent /></span>
        </div>
      `
    }
    new Vue({
      el:'#app',
      data() {
        return{

        }
      },
      components:{
        App
      },
      template:`
        <App />
      `
    })

全局组件

Vue.component('btn',{ // 这个就===生子及挂子,挂载到哪? 挂载到全局了,现在在任意组件可使用
  template:`
    <button>按钮</button>
  `
})

组件传值

父传子

// 在父组件中
<Child :father="xxx"/>
  
// 在子组件中
<div>
  {{father}}
</div>
props:['father']

子传父

// 在父组件中
<Child @getData="handleGetData(val)"/>
handleGetData(val) {
  console.log(val) // 这里拿到的就是子组件传的数据
}

// 在子组件中
<input @input="changeValue(val)" />
changeValue(val) {
  this.$emit('getData',val)
}

插槽

基本用法

  // 你定义了一个组件, 没有用闭合方式,如<VBtn></Vbtn>, 则<VBtn></Vbtn>
  // 这个里面的内容都会被分到slot里
  // 如果slot有名字, 则里面的内容也会在有相同名字的时候被分到slot里
  Vue.component('Vbtn',{
    template:`
      <button>
        <slot></slot>
      </button>
    `
  })
  var vm = new Vue({
    el:'#app',
    data(){
      return
      }
    },
    template:`
      <div>
        <Vbtn>登陆</Vbtn>
        <Vbtn>注册</Vbtn>
      </div>
    `
  });

假设要实现一个elementUI里的button可以这么做:

<button class="default" :class="type">
</button>
props:["type"]

<Vbtn type="primary">主要按钮</Vbtn>
<Vbtn type="success">成功按钮</Vbtn>

具名插槽

给插槽起个名字

<li>
	<slot name="one"></slot>
	<slot name="two"></slot>
</li>
插入内容时
<ul>
	<MyLi>
		<h1 slot="one">one</h2>
		<h2 slot="two">two</h2>
	</Myli>
</ul>

weixin_37795553

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录