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>

  • 相关阅读:
    查询记录时rs.previous()的使用
    Cocos2d-x中由sprite来驱动Box2D的body运动(用来制作平台游戏中多变的机关)
    vim经常使用命令总结
    微信公众号:码农的世界
    RHEL5 X86-64上安装Oracle 11gR2演示样例与总结
    JavaScript中获取当前项目的绝对路径
    thinkphp内置标签简单讲解
    function $(id) {}表示什么函数
    表单实例(判断两次密码是否一致)
    thinkphp模板继承
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11324496.html
Copyright © 2011-2022 走看看