Vue的常用属性

最新推荐文章于 2024-04-23 09:40:10 发布

Mark Huo

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量2.3k

点赞数

分类专栏： Vue

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.父组件通过prop向子组件传值

先给父组件中绑定自定义属性
在子组件中使用props接收父组件传递的数据
在子组件中使用数据

<div id="app">
    <div>
        <input v-model="parentMsg">
        <br>
        <child :message="parentMsg"></child>
    </div>
</div>

<script>
    // 注册
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{ message }}</span>'
    })
    // 创建根实例
    new Vue({
        el: '#app',
        data: {
            parentMsg: '父组件内容'
        }
    })
</script>

2.子组件像父组件传递

先在父组件的子组件标签中自定义事件和回调方法
在子组件的自定义函数中使用$emit触发父组件的自定义事件，并通过￥emit的第二个参数将值传递给父组件中的回调函数

<div id="app">
    <div id="counter-event-example">
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal" @sendmes="fromchild"></button-counter>
        <button-counter v-on:increment="incrementTotal" @sendmes="fromchild"></button-counter>
    </div>
</div>

<script>
    Vue.component('button-counter', {
        template: '<div>' +
            '<button v-on:click="incrementHandler">{{ counter }}</button>' +
            '<input type="text" v-model="childData" @input="changeValue(childData)" />' +
            '</div>',
        data: function () {
            return {
                counter: 0,
                childData: ''
            }
        },
        methods: {
            incrementHandler: function () {
                this.counter += 1
                this.$emit('increment')
            },

            changeValue(val){
                //在函数中使用$emit触发父组件中的自定义事件
                this.$emit('sendmes',val)
            }
        },
    })
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total += 1
            },
            fromchild(val){
                console.log('from child'+val)
            }
        }
    })

3.slot承载父组件在子组件标签中定义的内容

    Vue.component('Vbtn', {
            template: `<button><slot>按钮</slot><button/>`
        }
    ) //全局组件

    var Vcontent = {
        template: `<div>
         <div>我是内容组件</div>
         <Vbtn>登录</Vbtn>
        </div>`

    }

配合传递的type-class可以自主封装按钮

4.具名插槽

Vue.component('myLi',{
        template:`
            <li>
            第一个坑<slot name="two"></slot>
            第二个坑<slot name="three"></slot>
            </li>
        `
    })

    var App = {
        template:
            `<div>
                <ul>
                    <myLi>
                    <h2 slot="two">占2</h2>
                    <h3 slot="three">占3</h3>
                    </myLi>

                </ul>
             </div>`
    }

作用域插槽

为了让子组件中的数据在父组件中可以直接用{{}}调用

https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽

过滤器

局部过滤器

   filters:{
            // 1.声明过滤器
            // 2.使用过滤器{{ 数据|过滤器的名字 }}
            myCurrent:function (value) {
                return value+"元"
            }
        }
        
    <h3>{{price | myCurrent}}</h3>

全局过滤器

    // 全局过滤器
    Vue.filter('myReverse',function (value,arg) {
        return (arg+" "+value).split('').reverse().join('')
    })
    
    <h4>{{ mask| myReverse }}</h4>
    <h4>{{ mask| myReverse("clearlove") }}</h4>

watch 监听

简单监听

 <input type="text" v-model="msg"/>
watch:{
            //字符串监听
            msg : function (newV,oldV) {
                console.log(newV,oldV)
            },}

深度监听

watch 监听的是一个对象，只要对象的内存地址发生改变时才会触发，因此复杂的数据类型，需要深度监视

    <ul>
        <li v-for="site in sites">{{site.name}}</li>
    </ul>
    <button @click="sites[0].name = 'facebook'">按钮</button>

   watch:{
            //字符串监听
            msg : function (newV,oldV) {
                console.log(newV,oldV)
            },
            // 深度监听
            sites:{
              deep:true,
              handler:function (newV,oldV) {
                console.log('sites',newV[0].name,oldV[0].name)
              },
            }
        }

计算属性

计算属性默认只有Get，可以自己定义set

demo01

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ site }}</p>
    <button @click="change">按钮</button>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'Google',
            url: 'http://www.google.com'
        },
        computed: {
            site: {
                // getter
                get: function () {
                    return this.name + ' ' + this.url
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        },
        methods: {
            change(){
                console.log(vm.site)
                vm.site = '菜鸟教程 http://www.runoob.com';
                console.log(vm.name,vm.url)
                console.log()
            }
        }
    })
    // 调用 setter， vm.name 和 vm.url 也会被对应更新
    // vm.site = '菜鸟教程 http://www.runoob.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
</script>
</body>
</html>