Vue组件基础（二）

Vue组件基础（二）

vue动态组件

在登录注册页面经常可以看到点击手机验证码登录或账号密码登陆的时候都可以很快的更新页面，这个功能用Vue的动态组件可以实现。

设置两个快的组件及vue实例

    Vue.component('Userlogin', {
        template: `
    <div>
    账号：<input type="text">
    <br>
    密码：<input type="password">
    </div>`
    })
    Vue.component('Phonelogin', {
        template: `
    <div>
    手机号：<input type="text">
    <br>
    验证码：<input type="text">
    </div>`
    })

new Vue({
        el: "#app",
        data: {
            comp: 'Userlogin'//设置默认的组件
        },
        methods: {
            compchange() {
//点击按钮的时候显示的组件变化
                return this.comp = this.comp == 'Userlogin' && 'Phonelogin' || 'Userlogin'
            }
        },
        computed: {
            tabchange() {
//当组件变化的时候，按钮的内容也变化
                return this.comp == 'Userlogin' && '手机验证码登录' || '账号密码登录'
            }
        }
    })

渲染数据

<div id="app">
    <button
            @click="compchange">{{tabchange}}
    </button>
    <keep-alive>
        <component :is="comp"></component>
    </keep-alive>
</div>

组件中的template

​ 在实例范围内书写template标签，那么将来它是不会在渲染中出现的

​ template标签在实例范围外是直接显示的

​ 组件的模板可以放在实例范围外书写，但是不好的一点就是这个template标签将来还会存在

​ 也有一个好处是在body里写的时候有提示，便于书写

利用这个特性可以将组件的创建过程写在body内

Vue.component('Hello',{
	template: '#hello'
})

    <div id="app">
        <template>//实例范围内不渲染
            {{ info }}
        </template>
        <Hello></Hello>
    </div>
    <template id="hello">
        <div>
            <p> Hello  模板 </p>
        </div>
    </template>

组件中的data

​ 1. 组件是一个独立的个体，那么它应该拥有属于它自己的数据

​ 2. 组件的数据是要有独立作用域的，不容易被外界干扰

​ 3. 除了根实例以外，组件的data选项都是一个函数

​ 4. 为什么data选项要返回一个对象？

​ 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置( Object.defineProperty())

​ 5. 组件的数据在组件的模板中相当于全局变量

创建组件

    Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                money: 2000
            }
        }
    })

在实例范围内使用组件

    <div id="app">
        <Hello></Hello>
    </div>
    <template id="hello">
        <div>
            <!-- 唯一根元素 -->
            <p> {{ money }} </p>
        </div>
    </template>

组件嵌套

组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可

 <template id="father">
        <div>
            father
            <Son></Son>
        </div>
    </template>

    <template id="son">
        <div>
            son
        </div>
    </template>

    Vue.component('Father',{
        template: '#father'
    })
    Vue.component('Son',{
        template: '#son'
    })

组件通信

通件通信的方式

• 父子组件通信

  • 案例
  • 属性验证
    • vue提供
    • 第三方也有 vue-validate
    • 现在流行用TS[ typescript ]

• 子父组件通信

• 非父子组件通信

• 多组件状态共享： Vuex

• 其他

  ​ 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

  ​ 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息

    Vue.component('Father',{
        template: '#father',
        data () {
            return {
                money: 2000
            }
        }
    })
    Vue.component('Son',{
        template: '#son',
        props: ['money']//接受父组件传来的值
    })

    <template id="father">
        <div>
            father
            <Son :money = "money"></Son>
            //将父组件中的data money传给子组件的money
        </div>
    </template>

    <template id="son">
        <div>
            son
            <p> 老爸给了我 {{ money }} 生活费 </p>
        </div>
    </template>

经过这两步子组件就可以得到父组件的数据

组件props验证

Vue.component('Son',{
        data () {
            return {
                remain: 10
            }
        },
        template: '#son',
        props: {
            // 属性： 属性类型
            // 'money': Number, //属性验证
            'money': {
                validator ( val ) { // validator作用就是可以详细书写验证规则
                    return val > 3000
                }
            }
        }
    })

在子组件的props可以验证从父组件中传下来的值

'money': Number, //属性验证

验证属性是否是数值

'money': {
          validator ( val ) { // validator作用就是可以详细书写验证规则
          return val > 3000
           }
      }

验证属性是否满足条件