vue基础语法以及父子组件如何相互传值

Bertha 。 2022-05-09 04:16 162阅读 0赞

## vue模板引擎语法，关注数据层面 ##

1.  Mustache语法:\{ \{msg\}\} 主要是用date控制
2.  html赋值：v-html=”“
3.  绑定属性：v-bind:id=”“
4.  使用表达式：\{OK?”yes”:”NO”\}
5.  文本赋值：v-text=”“
6.  指令：v-if=”“
7.  过滤器：\{ \{message|capitalize\}\}和v-bind:id=”rawId|formatId”

## class和style绑定 ##

*  对象语法：v-bind：class=”\{active:isActive,’text-danger’:hasError\}”
 *  数组语法：

data:{
    activeClass:"active",
    errorClass:"text-danger"
    }

*  style绑定-对象语法

v-bind:style="{color:activeColor,fontSize +'px'}"
     //activeColor和fontSize在date里面定义变量

*  条件渲染

v-if  
v-else  
v-eles-if  
v-show(和v-if的区别是v-if判断是不会加载到页面，而v-show是加载到页面只是不显示)  
v-cloak

*  vue事件处理器

v-on:click=”greet” 或许@click=”greet”  
v-on:click.stop 阻止冒泡  
v-on:click.stop.prevent阻止默认事件(a标签点击失灵)  
v-on:click.self 给绑定对象绑定事件，对子元素是没有效果的  
v-on:click.once 只能绑定一次，例如”下一步”,只能生效一次。  
v-on:keyup.enter/tab/delete/esc/space/up/down/left/right

*  vue组件

全局组件和局部组件  
父子组件通讯-数据传递 (vue允许：父给子传递数据用到plp，不允许：不能给父传递数据–可以使用Emit来操作)

## VUE主张单向数据流，那怎么做到子给父传值呢 ##

**父给子传值案例：**

APP.vue(父)注册子组件Counter，并定义num值，给子组件传值
    <template>
        <div>
            <Counter num="10"></Counter>
        </div>
    </template>
    
    <script>
        import Counter from './components/first'
        export default {
            data(){
                return {}
            },
            components: {
                Counter
            }
        }
    
    </script>

first.vue(子)接收父传的值，使用到props接收值。
    <template>
        <div>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <p><span>{
       {num}}</span></p>
        </div>
    </template>
    
    <script>
        export default {
            props: ["num"],
            data () {
                return {
                    num: 0,
                }
            },
            methods: {
                increment(){
                    this.num++;
                },
                decrement(){
                    this.num--;
                }
            }
        }
    </script>

**子给父传值案例–需要通过emit操作：**

APP.vue(父)在注册子组件Counter时自定义两个事件(incre和decre),并在增加increment和decrement的方法，说道底就是，父方法创建方法让子组件调用改变
    <template>
        <div>
            <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>
            <p>父:{
       {num}}</p>
        </div>
    </template>
    
    <script>
        import Counter from './components/first'
        export default {
            data(){
                return {
                    //给父默认为10
                    num:10
                }
            },
            components: {
                Counter
            },
            methods:{
                increment(){
                    this.num++;
                },
                decrement(){
                    this.num--;
                }
            }
        }
    
    </script>

//子组件使用$emit调用父组件(注意是事件名)
    <template>
        <div>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <p><span>{
       {num}}</span></p>
        </div>
    </template>
    
    <script>
        export default {
            props: ["num"],
            data () {
                return {
                    num: 0
                }
            },
            methods: {
                increment(){
                    this.$emit('incre');
                },
                decrement(){
                    this.$emit('decre');
                }
            }
        }
    </script>