10- vue(伍)

当前位置:

首页 > temp > JavaScript教程 >

10- vue(伍)

1. vue父子组件传值

1.1 父传子

步骤简述：

子组件中引入props，用来接受父组件数据
父组件里的子组件标签中绑定父组件的数据

<body>
    <div id='app'>
        <input type="text" v-model='msg'>
        <son :message='msg'></son>
    </div>
</body>
<template id="son">
    <div>
        这是父组件传进来的：{{message}}
    </div>
</template>
<script>
    Vue.config.devtools = true;
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '父组件的数据',
        },
        methods: {},
        components: {
            son: {
                template: '#son',
                props: {
                    message: {
                        type: String,
                    }
                }
            },
        }
    })
</script>

props内的写法：

props: {
    // 规定了父组件只能传字符串类型
    prop1: String,
    // 可以设置多个类型，可以传Number也可以传String
    prop2: [Number, String],
    prop3: {
        // 设置类型
        type: Array,
		// 设为必填字段
		required: true,
        // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
        default: function () {
            return [{
                name: '这个一个默认的名字'
            }]
        }
    },
}

1.2 子传父

步骤简述：

子组件中通过某种方法触发$emit传值接口方法，$emit参数为自定义传值方法名，后面的是要传的子组件中的数据
在父组件里的子组件标签中通过``@自定义传值方法名绑定父组件中的接收方法，接收方法`中的参数即为所传的子组件的值

<body>
    <div id='app'>
        <span>这里是父组件</span>
        <span>{{receivechild1}}</span> <span>{{receivechild2}}</span>
        <son @toparents='getchildmsg'></son>
    </div>
</body>
<template id="son">
    <div>
        <hr>
        <button @click='childClick'>点击将子组件的值传给父组件</button>
    </div>
</template>
<script>
    Vue.config.devtools = true;
    let vm = new Vue({
        el: '#app',
        data: {
            receivechild1: '',
            receivechild2: '',

        },
        methods: {
            //参数数量根据子组件$emit方法传的数据个数决定
            getchildmsg(data1, data2) {
                this.receivechild1 = data1;
                this.receivechild2 = data2;
            }
        },
        components: {
            son: {
                template: '#son',
                data() {
                    return {
                        childmsg1: '子组件数据1',
                        childmsg2: '子组件数据2',
                    }
                },
                methods: {
                    childClick() {
                        this.$emit('toparents', this.childmsg1, this.childmsg2);
                    }
                },
            }
        }
    })
</script>

2. ref的使用

给DOM节点和组件加上ref属性，用于获取DOM节点和组件

<body>
    <div id='app'>
        <button @click='signin' ref="signinBtn">登录</button>
        <signin ref="signinquote"></signin>
    </div>
</body>
<template id="signin">
</template>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            signInstruction: 'signin',
        },
        methods: {
            signin() {
                this.signInstruction = "signin";
                console.log(this.$refs.signinquote.signMsg);
                console.log(this.$refs.signinBtn);
            },
        },
        components: {
            signin: {
                template: '#signin',
                data() {
                    return {
                        signMsg: '开始登录',
                    }
                },
            },
        }
    })
</script>

3. vue路由

路由的使用步骤

引入js文件，这个js需要放在vue的js后面
创建路由new VueRouter(),接受的参数是一个对象
在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
path属性是url的地址,component属性就是显示的组件（传组件的对象）
创建的路由需要和vue实例关联一下
路由到的组件显示的位置<router-view></router-view>

3.1 路由跳转

引入router-link标签，并设置to属性
默认编译成a标签，可以通过tag设置包裹标签

3.2 路由重定向

在new VueRouter()对象的routes属性中，使用redirect进行重定向

3.3 路由高亮

通过默认router-link-active类名设置点击后的路由链接样式

3.4 参数定义

两种路由传参的办法，query传参和params传参

通过在<router-link></router-link>的to属性中直接 ? 拼接的方法。通过在绑定to属性传对象，例如:to="{path:'/mine',query:{id:7}}"。通过$route.query.参数名来取到
通过在routes列表中给路由添加name属性并在path后拼接/:变量名，在<router-link></router-link>中给to绑定{name:'register',params:{id:6}}。通过$route.params.参数名来取到

<body>
    <div id='app'>
        <router-link to="/login">去登陆</router-link>
        <router-link :to="{name:'register',params:{id:6}}">去注册</router-link>
        <router-link :to="{path:'/mine',query:{id:7}}"> 去个人中心</router-link>
        <router-view></router-view>
    </div>
</body>
<template id="login">
    <div>
        <h3>已有帐号?来登录吧</h3>
    </div>
</template>
<template id='register'>
    <div>
        <h3>呀嘞呀嘞，还没帐号？来注册吧</h3>
    </div>
</template>
<template id='mine'>
    <div>
        <h3>yokoso，这里是个人中心</h3>
    </div>
</template>
<script>
    const login = {
        template: '#login',
    }
    const register = {
        template: '#register',
    }
    const mine = {
        template: '#mine',
        created() {
            console.log(this.$route.query);
        },
    }
    const router = new VueRouter({
        routes: [
            {
                // 重定向
                path: '/',
                redirect: '/index'
            },
            {
                path: '/index',
                component: app,
            },
            {
                path: '/login',
                component: login,
            },
            {
                path: '/register/:id', 
                name: 'register'
                component: register,
            },
            {
                path: '/mine',
                component: mine,
            }
        ]
    })
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router,
    })
</script>

3.5 路由嵌套

使用路由嵌套后必须在父组件中写入<router-view></router-view>来给子组件预留位置

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

3.6 命名视图

命名视图可以做到一个地址对应多个组件

<router-view></router-view>
    <div class='my-container'>
        <router-view name='sidebar'></router-view>
        <router-view name='main'></router-view>
    </div>

4. watch和computed

watch侦听属性：当data中的某个数据需要随其他数据的变化而变化时，更通用的方法是使用watch侦听器

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

computed计算属性：当需要对data的数据进行复杂逻辑操作的时候，应当使用computed属性

在computed里计算的属性不能生命在data中

computed: {
  Name: function () {
		//默认使用computed只有getter方法
        return this.firstName + ' ' + this.lastName
      	}
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

method、computed和watch的区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

__EOF__

本文作者： ReCreyed

本文链接： https://www.cnblogs.com/recreyed/p/vue05.html

栏目列表