vue组件踩坑笔记之prop传值

<!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-...

星辰志

4521人浏览 · 2019-07-23 16:52:23

星辰志 · 2019-07-23 16:52:23 发布

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="components-demo">
        <blog-post
            v-bind:likes="post.likes"
            v-bind:title="post.title"
            v-bind:parent="post.parent"
            v-bind:likesnumber="42"
            v-bind:nums="post.nums"
         ></blog-post>
         <h3>{{message}}</h3>
         <h3>{{message1}}</h3>
    </div>
    <a href="vueComponentByValue.html" >静态传值地址</a>
</body>
<script>
    Vue.component('blog-post',{
        data: function(){
            return {

            }
        },
        props: [
            'likes',
            'title',
            'parent',
            'likesnumber',
            'nums',
            ],
        template:'<h3>{{ likes }}{{ title }}{{ parent }}{{ likesnumber }}{{ nums }}</h3>'
    })
    
    var test = new Vue({
        el:'#components-demo',
        data: {
            post: {
                title: String,
                likes: Number,
                isPublished: Boolean,
                commentIds: Array,
                author: Object,
                callback: Function,
                contactsPromise: Promise,// or any other constructor
                parent:'父传子',
                nums:'42'
            },
            likesnumber:Number,
            message:'父传子要注意，动态静态要区分传静态<blog-post title="My journey with Vue"></blog-post>赋值直给title'+
                    '传动态值要放到data中，v-bind的做绑定，数据单向有变动，子组件此时要注意props中接收值，拿到才能去展示'+
                    '传值注意大小写和-符号我遇到了-符号爆红大写字母警告',
            message1:'如下vue.js:640 [Vue tip]: Prop "likesnumber" is passed to component <Anonymous>, but the declared prop name is "likesNumber". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "likes-number" instead of "likesNumber".',
        },
    })
</script>
</html>

prop只适合父组件向子组件传参数，而且是单项传输。代码说明了一切。

记几个常用快捷键：使用键盘快捷键选中当前行及多行内容：按住⬅(Home键位定位到行首)再按住⬆(PgUp键位定位到想选中的行)或⬇(PgDn键位定位到向选中的行)选择好合适的行后按Shift+End键位选中文字到行尾。总之选中快捷键位为Shift+⬇(⬆或者⬅或者➡)便可选中内容或者取消选中。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^