Vue组件

最新推荐文章于 2024-08-30 11:12:09 发布

纯米饭

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量166

点赞数 1

分类专栏： vue 文章标签： vue html

本文链接：https://blog.csdn.net/qq_23079469/article/details/112495610

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是组件

vue可以进行组件化开发，组件是Vue的基本构造单元，
案例：

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      data () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">被单击{{count}}次</button>'
    })
    var vm = new Vue({ el: '#app' })
  </script>

局部注册

<div id="app">
    <my-component></my-component>
  </div>
  <script>
    var com1 = {
      template: '<p>我是vm实例中的局部组件</p>'
    }
    var vm = new Vue({
      el: '#app',
      // 注册局部组件
      components: { myComponent: com1 }
    })
  </script>

可通过components注册组件

template 模板

 <div id="app">
    <p>{{title}}</p>
    <my-component></my-component>
  </div>

  <template id="tmp1">
    <p>{{title}}</p>
  </template>

  <script>
    Vue.component('my-component', {
      template: '#tmp1',
      data () {
        return {
          title: '我是组件内的title',
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        title: '我是vm实例的title'
      }
    })
  </script>

上面的template模板是字符串保存的，不适合复杂一点的，这里使用HTML结构。

组件之间的数据传递

1.props传值

  <div id="app">
    <my-parent name="title"></my-parent>
  </div>
  <script>
    Vue.component('my-parent',{
      props: ['name'],
      template: '<div>我是父组件{{name}}</div>'
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>

props接收name数据，name在父组件中定义，同时name可以与data绑定，当data数据发生改变时，组件中的name值也发生改变
props是以从上到下的单向数据流传递，父级组件的props更新会改变子组件，但是子主键不会改变父组件

1.$emit传值

 <div id="app">
    <parent></parent>
  </div>

  <template id="child">
    <div>
      <button @click="click">Send</button>
      <input type="text" v-model="message">
    </div>
  </template>
  
  <script>
    Vue.component('parent', {
      template: '<div><child @childFn="transContent"></child>' +
                  '子组件传来的值 : {{message}}</div>',
      data () {
        return {
          message: ''
        }
      },
      methods: {
        transContent (payload) {
          this.message = payload
        }
      }
    })
    // child组件
    Vue.component('child', {
      template: '#child',
      data () {
        return {
          message: '子组件的消息'
        }
      },
      methods: {
        click () {
          this.$emit('childFn', this.message);
        }
      }
    })
    var vm = new Vue({ el: '#app' })
 </script>

这个用于子组件向父组件传值

组件切换

Vue中的界面结构是由组件构成的，不同组件可以表示不同页面

<body>
  <div id="app">
    <a href="#" @click.prevent="flag ? flag : flag = !flag">登录</a>
    <a href="#" @click.prevent="flag ? flag = !flag : flag">注册</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
  </div>
  <script>
    Vue.component('login', {
      template: '<div>登录页面</div>'
    })
    Vue.component('register', {
      template: '<div>注册页面</div>'
    })
    var vm = new Vue({
      el: '#app',
      data: { flag: true }
    })
 </script>
</body>

Vue的生命周期

钩子	说明
beforeCreate	创建实例对象之前执行
created	创建对象之后执行
beforeM ount	页面挂载成功之前执行
m ounted	页面挂载成功之后执行
beforeUpdate	组件更新之前执行
updated	组件更新之后执行
beforeDestroy	实例销毁之前执行
destroyed	实例销毁之后执行

纯米饭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件

什么是组件vue可以进行组件化开发，组件是Vue的基本构造单元，案例：<div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> Vue.component('my-comp
复制链接

扫一扫

专栏目录