zoukankan      html  css  js  c++  java
  • vuebase-2.Props的验证组件的深入

    1.new实例根目录的数据,其他组件可以随时访问,但是不推荐

    2.通过computed方法访问new实例根目录的数据

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'

    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    data:{msg:"vue.root"},
    components: { App },
    template: '<App/>'
    })

    child.vue

    <template>
    <div class="child">
    子组件:
    <ul>
    <li v-for="item in friends">{{item}}</li>
    </ul>
    {{title}}--{{age}}---{{nick}}---{{parentss}}<button @click="sendParent" type="button">改变子组件向父组件传递数据的按钮</button>
    {{gemsgInfo}}
    </div>
    </template>

    <script>
    export default{
    name:"child",
    //props:["title","age"],
    props:{
    title:String,
    age:Number,
    nick:{
    type:String,
    default:"大宝贝"
    },
    parentss:{
    type:String,
    required:true
    },
    friends:{
    type:Array,
    default:function(){
    return ["大宝贝闺蜜","大宝贝闺蜜1","大宝贝闺蜜2","大宝贝闺蜜3"]
    }
    }
    },
    data(){
    return{

    }
    },
    methods:{
    sendParent(){
    this.$emit("sendParentinfo","这个是子组件的数据");
    }
    },
    computed:{
    gemsgInfo(){
    return this.$root.msg
    }
    }
    }
    </script>

    <style lang="css" scoped>
    </style>

    3.操作原生dom

    <template>
    <div>vue.乐
    <p class="" ref="p1">p元素</p>
    <input type="text" ref="msginput">
    <button @click="getmsg" type="button">get</button>
    </div>
    </template>
    <script>
    export default{
    name:"music",
    data(){
    return{

    }
    },
    mounted(){
    this.$refs.p1.innerHTML="改变后的p元素"
    this.$refs.msginput.value="msg"
    console.log(this.$refs.p1);
    },
    methods:{
    getmsg(){
    console.log(this.$refs.msginput.value)
    }
    }
    }
    </script>
    <style lang="css" scoped>
    </style>

  • 相关阅读:
    如何用Matplotlib绘制三元函数
    总结一下在新工作中都学到了什么?
    Debian MySQL 卸载和安装 PHP安装
    Sphinx的配置和使用
    Python的多继承
    任务分配准则
    Python解析XMl
    什么是序列化,Python中json的load,loads,dump,dumps和pickle的load,loads,dump,dumps的区别
    程序文件路径和目录的操作之BASEDIR目录获取
    模块和包
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11324496.html
Copyright © 2011-2022 走看看